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.jsonSetup for manual installation
First you will need to follow the manual install setup guide.
Copy this component
import { cn } from '@/lib/utils';
import * as React from 'react';
/**
* Props for the ProgressBar component.
*/
export type ProgressBarProps = React.ComponentProps<'div'> & {
/**
* The progress value as a percentage (0-100).
*/
progress: number;
/**
* Additional className for the filled part of the bar.
*/
indicatorClassName?: string;
};
/**
* A horizontal progress bar that visualizes completion percentage.
*
* @example
* ```tsx
* <ProgressBar progress={75} />
* <ProgressBar progress={75} className="bg-white/30" indicatorClassName="bg-white" />
* ```
*/
function ProgressBar({
progress,
className,
indicatorClassName,
...props
}: ProgressBarProps) {
const value = Math.min(100, Math.max(0, progress));
return (
<div
role="progressbar"
aria-valuemin={0}
aria-valuemax={100}
aria-valuenow={Math.round(value)}
className={cn(
'h-1 w-full overflow-hidden rounded-full bg-primary/15',
className,
)}
{...props}
>
<div
className={cn(
'h-full rounded-full bg-primary transition-[width] duration-150 ease-linear motion-reduce:transition-none',
indicatorClassName,
)}
style={{ width: `${value}%` }}
/>
</div>
);
}
export { ProgressBar };Usage
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>
);
}