Progress Bar

A horizontal bar that shows how far a task has come, from 0 to 1, or runs indeterminately when the end is unknown.

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/core-progress-bar";

export default function HowFar() {
  return (
    <div style={{ maxWidth: 420 }}>
      <ProgressBar
        value={0.42}
        label="Import of the March invoices"
        showLabel
      />
    </div>
  );
}