Feedback

Progress

Determinate progress bar.

Import

tsx

import { Progress } from "@cooud-ui/ui";

bash

npx cooud-ui add progress

Examples

Determinate

Determinate progress bars — the middle bar animates in on mount.

tsx

function ProgressDemo() {
  const [animated, setAnimated] = useState(0);

  useEffect(() => {
    const timer = setTimeout(() => setAnimated(66), 400);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Progress value={30} />
      <Progress value={animated} />
      <Progress value={100} />
    </div>
  );
}