Kolam & Chai Progress

A labeled progress indicator ported from a native-progress-enhancing web component, with three visual registers: a plain pencil-hairline bar, a hand-inked kolam line that closes at 100%, or a cutting-chai glass that fills with tea — moving only when the value moves and speaking its state in words when indeterminate.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Kolam & Chai Progress to your project and fits it to your theme.

"use client";
import Progress from "@/components/ui/progress";

export default function ProgressIndeterminateDemo() {
  return (
    <div className="w-full max-w-md mx-auto grid gap-6 p-6 bg-background text-foreground">
      <Progress label="Waiting for the bank to confirm" />
      <Progress register="playful" label="Waiting for the bank to confirm" />
      <Progress register="quiet" label="Waiting for the bank to confirm" />
    </div>
  );
}