Progress Bar

An accessible, animated progress bar that shows determinate or indeterminate progress of an operation, styled with plain CSS custom properties.

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.

import ProgressBar from "@/components/ui/css-progressbar";

export default function ProgressBarDemo() {
  return (
    <div className="flex items-center justify-center p-10">
      <ProgressBar label="Loading…" value={60} />
    </div>
  );
}