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

In the terminal, run the following command to begin:
npx hq-kit add progress-circle

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.

10

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.