Getting Started
Dark Mode
Charts
Colors
Drag-and-drop
Forms
Utilities
Progress Circle
Watch it fill up as tasks complete, like a circle loading bar on a game console, offering visual progress updates.
Basic
Progress bars show how much an operation is done, either exactly or roughly, over time.
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Manual Installation
Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.
Anatomy
Indeterminate
You can also make the progress circle indeterminate by setting the isIndeterminate prop.
Custom Size
You can customize the size of the progress circle by using className with tailwind classes or style props.
Controlled
You can control the progress circle by using the value prop.
Combine with Button
The button includes an isPending prop to indicate a pending state, allowing for seamless integration with the progress circle.
Custom Color
The progress circle can be customized with the color prop.