Feedback

Progress

Server Component

Determinate progress bar.

Import

tsx

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

bash

npx cronus-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} aria-label="Storage used" />
      <Progress value={animated} aria-label="Upload progress" />
      <Progress value={100} aria-label="Sync complete" />
    </div>
  );
}