ThinkingDots

Animated three-dot loading indicator for AI thinking state. Pure CSS, no dependencies.

Use and inspectUse this as a presentational interface around your own submit, stream, or state handlers. Reset preview only remounts the local example; it does not send a request or connect to a model.Next: inspect the source and wire its callback to a bounded backend action.

ThinkingDotsAnimated three-dot loading indicator for AI thinking state. Pure CSS, no dependencies.

type ThinkingDotsProps = {
  label?: string;
  size?: "sm" | "md";
};

export function ThinkingDots({ label, size = "md" }: ThinkingDotsProps) {
  return (
    <div className={`pk-thinking pk-thinking--${size}`}>
      {label && <span className="pk-thinking-label">{label}</span>}
      <div className="pk-thinking-dots">
        <div className="pk-thinking-dot" />
        <div className="pk-thinking-dot" />
        <div className="pk-thinking-dot" />
      </div>
    </div>
  );
}

/* Add to your CSS:
@keyframes pk-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}
.pk-thinking { display: inline-flex; align-items: center; gap: 6px; }
.pk-thinking-dots { display: flex; gap: 4px; align-items: center; }
.pk-thinking-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: 0.5;
  animation: pk-bounce 1.2s ease-in-out infinite;
}
.pk-thinking-dot:nth-child(2) { animation-delay: 0.15s; }
.pk-thinking-dot:nth-child(3) { animation-delay: 0.30s; }
*/

Props

Prop	Type	Default	Description
`label`	`string`	—	Optional label shown before the dots
`size`	`"sm" \| "md"`	`"md"`	Dot size variant