Progress Bar
A horizontal progress bar component for visualizing completion percentage.
The ProgressBar component displays a horizontal progress indicator, commonly used to show file upload progress. It visually represents a percentage value (0-100) with a filled bar.
If you are installing the other dropzone components via the CLI, this component will be installed automatically. You can skip the following steps.
Installation
npx shadcn@latest add https://edgestore.dev/r/progress-bar.jsonUsage
Import the component and provide the progress prop.
import { ProgressBar } from '@/components/ui/progress-bar';
function ProgressDemo() {
const progress = 75;
return (
<div className="flex flex-col space-y-4 p-4 rounded-lg">
{/* Default usage */}
<ProgressBar progress={progress} />
{/* With custom styling */}
<div className="w-64">
<ProgressBar progress={progress} className="py-2" />
</div>
{/* Different progress values */}
<div className="space-y-2">
<ProgressBar progress={25} />
<ProgressBar progress={50} />
<ProgressBar progress={100} />
</div>
</div>
);
}