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.
Preview
Code
Installation
CLI
Manual
npx hq-kit add progress-circle
Indeterminate
You can also make the progress circle indeterminate by setting the isIndeterminate
prop.
Preview
Code
Custom Size
You can customize the size of the progress circle by using className with tailwind classes or style props.
Preview
Code
Controlled
You can control the progress circle by using the value
prop.
Preview
Code
Combine with Button
The button includes an isPending prop to indicate a pending state, allowing for seamless integration with the progress circle.
Preview
Code
Custom Color
The progress circle can be customized with the color
prop.
Preview
Code