Shadcn Progress: React Progress Bar Examples
The shadcn progress component renders a react progress bar that communicates how much of a task is complete, from file uploads to onboarding checklists. Built with Tailwind CSS on top of an accessible primitive, it exposes the current value to assistive technology while leaving the track and indicator fully themeable.
Ten progress examples are collected on this page, ready to copy and paste. The variants range from the standard linear bar to labeled bars with percentages, colored and gradient indicators, segmented steps, and circular progress treatments, each written in TypeScript for Next.js and other React apps.
What you get
- Linear bars: The classic determinate progress bar in multiple sizes and thicknesses.
- Labeled progress: Bars with inline percentage or value labels so users see exact completion.
- Color and gradient variants: Indicators in semantic colors and gradient fills for storage meters and score displays.
- Stepped progress: Segmented bars that show discrete stages, suited to wizards and onboarding flows.
- Circular styles: Ring shaped progress for compact spaces like stat cards and avatars.
Implementation tips
- Animate value changes: A CSS transition on the indicator transform makes updates feel smooth instead of jumpy.
- Label what is happening: Pair the bar with text describing the task and, when possible, a time or size estimate.
- Use indeterminate honestly: If you cannot measure progress, show a spinner or indeterminate state rather than a bar stuck at a fake percentage.
- Derive the value, do not store it: Compute percentage from real quantities such as bytes uploaded over total bytes, so the bar never drifts from reality.
- Mind reduced motion: Respect the prefers-reduced-motion media query when adding animated stripes or pulsing effects.
Where it fits in a dashboard
Progress bars appear across admin interfaces in two roles. The first is live feedback: uploads, imports, report generation, and batch jobs all need a bar that moves while the user waits. The second is static measurement: storage quotas, budget consumption, profile completeness, and goal tracking, where the bar visualizes a ratio rather than an ongoing task.
The stepped variants serve a third role in multi-stage flows. Onboarding sequences and checkout style wizards use segmented progress to tell users where they are and how much remains.
Related components and patterns
For waiting states without a measurable value, a Spinner or Skeleton placeholder is more honest than an indeterminate bar. Progress often reports into a Sonner Toast when a background task finishes, and quota style bars usually live inside a Card next to their metric.
If the value is user-adjustable rather than reported, that is a Slider, which shares the track and indicator anatomy but inverts the interaction.
Library support
The component follows the shadcn/ui Progress docs and wraps the Radix UI Progress primitive, which applies the progressbar role and aria-valuenow semantics so screen readers announce completion correctly.
An equivalent Base UI Progress component exists for projects on that stack, with the same accessibility contract, and the Tailwind CSS styling from these variants ports over directly.