Loader

Four loading variants: animated dots, spinning ring, pulsing circle, and progress bar fill.

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.

LoaderFour loading variants: animated dots, spinning ring, pulsing circle, and progress bar fill.

type LoaderProps = {
  variant: "dots" | "ring" | "pulse" | "bar";
  size?: "sm" | "md" | "lg";
  label?: string;
};

export function Loader({ variant, size = "md", label }: LoaderProps) {
  return (
    <div className={`pk-loader pk-loader--${size}`}>
      {variant === "dots" && (
        <div className="pk-thinking-dots">
          <div className="pk-thinking-dot" />
          <div className="pk-thinking-dot" />
          <div className="pk-thinking-dot" />
        </div>
      )}
      {variant === "ring" && (
        <svg className="pk-loader-ring" viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
        </svg>
      )}
      {variant === "pulse" && (
        <div className="pk-loader-pulse" />
      )}
      {variant === "bar" && (
        <div className="pk-loader-bar-track">
          <div className="pk-loader-bar-fill" />
        </div>
      )}
      {label && <span className="pk-loader-label">{label}</span>}
    </div>
  );
}

Props

Prop	Type	Default	Description
`variant`*	`"dots" \| "ring" \| "pulse" \| "bar"`	—	Loading animation style
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the loader
`label`	`string`	—	Optional text label below the loader