Animated Circular Progress Bar

Free

Preview live, install via shadcn or copy the source.

Installation

Install via shadcn

This will install the component and its dependencies automatically.

Usage

animated-circular-progress-bar-usage.tsxTSX

Props

NameTypeDefaultRequiredDescription
maxnumberNoMaximum value for the progress bar
minnumberNoMinimum value for the progress bar
valuenumberNoCurrent value for the progress bar
gaugePrimaryColorstringNoColor of the primary gauge
gaugeSecondaryColorstringNoColor of the secondary gauge
classNamestringNoAdditional CSS classes for styling
© reframe/ui 2026Built by @thommysart
More in Pricing & Sections