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.
If you are installing the other upload components via the CLI, this component will be installed automatically. You can skip the following steps.
Installation
Use the shadcn CLI to add the component to your project.
npx shadcn@latest add https://edgestore.dev/r/progress-bar.jsonUsage
Import the component and provide the progress prop. Use className for the track and indicatorClassName for the filled part.
import { ProgressBar } from '@/components/upload/progress-bar';
function ProgressDemo() {
return (
<div className="flex flex-col gap-4">
<ProgressBar progress={75} />
{/* On top of an image */}
<ProgressBar
progress={75}
className="bg-white/30"
indicatorClassName="bg-white"
/>
</div>
);
}