Animated Circular Progress Bar

Learn more about Mintlify

Enter your email to receive updates about new features and product releases.

Installation

showLineNumbers

import { AnimatedCircularProgressBar } from "@/components/ui/animated-circular-progress-bar"

showLineNumbers

<AnimatedCircularProgressBar
  max={100}
  min={0}
  value={75}
  gaugePrimaryColor="rgb(79 70 229)"
  gaugeSecondaryColor="rgba(0, 0, 0, 0.1)"
/>

Prop	Type	Default	Description
`className`	`string`	`-`	The class name to be applied to the component
`max`	`number`	`100`	The maximum value of the gauge
`min`	`number`	`0`	The minimum value of the gauge
`value`	`number`	`0`	The current value of the gauge
`gaugePrimaryColor`	`string`	`-`	The primary color of the gauge
`gaugeSecondaryColor`	`string`	`-`	The secondary color of the gauge

⌘I