Chakra-UI

I♥️Components

Circular Progress

|

Chakra Docs

|

⦾ The Chakra UI Circular Progress component offers a visually appealing way to represent an ongoing operation, where the completion status is known as a percentage. It can be used for processes such as file uploads, system checks, or any asynchronous task that requires time to complete.

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.

  • Determinate progress: This mode colorfully fills the circular track as the indicator progresses from 0 to 360 degrees.
  • Indeterminate progress: In this mode, the indicator expands and contracts while revolving around the circular track.

To import these components:

Examples

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.

40%

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

The CircularProgress component can also be used as a visual timer. Below is an example of a 10-second timer, where every second, we are incrementing the progress by 10%. Once it reaches 100%, it resets to 0 and starts over, acting as a repeating 10-second timer.

Code

Creative Idea No. 2

Images can sometimes take a while to load, especially if they are large or the user's network connection is slow. You can use CircularProgress to show the user that the image is loading. Below is an image loading example, where we'll simulate a delay in loading the image using a timeout function.

Code

Creative Idea No. 3

CircularProgress as a Scoring Indicator: This is somewhat similar to the progress label example, but in a different context. The idea here is to use CircularProgress to visually represent a score out of 100. It can be useful in quizzes, games, or other scoring situations. In this example, the ScoreIndicator component accepts a score prop, which is used to display the score both visually (with CircularProgress) and numerically (with CircularProgressLabel). You can adjust the color and size to suit your needs.

Your score

0%

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.