Progress Bar

Component 586

About

An accessible linear progress bar with animated fill, indeterminate shimmer, and pending/complete state labels.

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

Code

How Progress Bar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { ProgressBar } from "@/components/ui/progress-bar";
import { useEffect, useState } from "react";

export default function ProgressBarDemo() {
  const [value, setValue] = useState<number | null>(null);

  useEffect(() => {
    if (value === null) {
      const id = setTimeout(() => setValue(8), 1300);
      return () => clearTimeout(id);
    }
    if (value < 100) {
      const id = setTimeout(() => setValue(Math.min(100, value + 14)), 520);
      return () => clearTimeout(id);
    }
    const id = setTimeout(() => setValue(null), 1800);
    return () => clearTimeout(id);
  }, [value]);

  return (
    <div className="mx-auto w-full max-w-[360px]">
      <ProgressBar
        value={value}
        label="roadmap.pdf"
        pendingLabel="Sizing"
        completeLabel="Upload complete"
      />
    </div>
  );
}