The component consists of a circular track, partially filled to signify the progress of the operation. Aspects like size, color, and thickness of both the track and progress indicator can be customized to align with your application's design aesthetic.
A critical attribute of the Circular Progress component is the 'value' property. This numerical property, ranging between 0 and 100, indicates the current progress. If the value isn't provided, the circular progress will rotate continuously, signifying an ongoing operation with an unknown completion time.
Like all Chakra UI components, the Circular Progress component is designed with accessibility in mind, featuring appropriate ARIA roles and attributes. These attributes automatically communicate the progress state (determinate or indeterminate) to assistive technologies, ensuring the component aids in creating inclusive web experiences.
To import these components:
Here, the Chakra UI CircularProgress component is being used with the value prop set to 80. This indicates that the circular progress indicator will be visually filled up to 80% of its total capacity, reflecting the progress made towards a specific task or operation.
Here, CircularProgress is being used to display a circular progress indicator. The value prop is set to 30, indicating that the progress indicator will be filled up to 30% of its total capacity. To control the size of the CircularProgress component, the size prop is set to "120px". This means that the circular progress indicator will have a diameter of 120 pixels, influencing its overall visual appearance and proportion within the user interface.
In this example, the thickness prop is set to "4px", which determines the thickness of the progress bar or arc within the circular progress indicator. In this case, the progress bar will have a thickness of 4 pixels, creating a sleak indicator of the progress made.
In this example, the thickness is set again, this time to 12px, but we also have utilized the color prop is set to "orange.400". This determines the color of the progress bar or arc within the circular progress indicator. In this case, the progress bar will have an orange color with a shade of 400, creating a visually distinctive indicator.
This example highlights another feature of the Chakra UI CircularProgress component, the CircularProgressLabel. This component is used to display the progress value as "40%". The label is positioned at the center of the circular progress indicator, providing a textual representation of the progress made.
In this example, the isIndeterminate prop is set to true, indicating that the progress indicator will be in an indeterminate state. This means that instead of representing a specific progress value, the indicator will continuously animate or loop, giving the impression of ongoing activity or an unknown progress duration.
The trackColor prop allows you to specify the color of the background track behind the progress arc. In this example, the track color is set to "red.200", to show this option.
Setting the capIsRound prop to true will make the cap of the progress indicator rounded instead of having flat edges.
Did you know?
Creative Idea No. 1
Creative Idea No. 2
Creative Idea No. 3