Chakra-UI

I♥️Components

Progress Bars

|

Chakra Docs

|

⦾ The Progress component in Chakra UI is used to represent the completion progress of a task or operation. Similar to the Circular Progress component, it's an effective way to visually convey the status of a task where the percentage of completion is known.

The Progress component is a horizontal bar that gets progressively filled from left to right to indicate the progress of an operation. It provides a clear visual cue to the user about the status of background tasks such as file uploads, downloads, data processing, and more. One of the main features of the Progress component is the value property, which is a number between 0 and 100 indicating the current progress.

If the value property is not provided, a striped pattern will be applied to the bar to indicate indeterminate progress, where the percentage of completion is unknown. The Progress component allows you to customize the height, color scheme, and even whether or not to display stripes. You can also control whether the progress is animated or not using the isAnimated property.

In terms of accessibility, Chakra UI automatically applies the appropriate ARIA roles and attributes to the Progress component, making it a suitable choice for developing inclusive user interfaces.

  • Basic Progress Bar: Use the Progress component to create a simple progress bar. The value prop sets the current progress.
  • Customized Progress Bar: You can customize the progress bar's color, size, and other properties.
  • Animated Progress Bar: To animate the progress bar, add the isAnimated prop.
  • Progress Bar with Stripe: You can add a stripe to the progress bar for a different visual effect using the isAnimated and hasStripe props.
  • Indeterminate Progress Bar: If you don't know the value or it's not yet ready, you can show an indeterminate progress bar.

To import this component:

Examples

This is a basic progress bar that's filled up to 80%. It is a great tool to visualize the progress of a task or event.

This progress bar is filled up to 64% and also features a striped pattern for a more dynamic visual. It's excellent for when you want to make the progress bar more noticeable.

This is a small-sized, red-colored progress bar filled up to 20%. The red color could be used to convey a warning or critical progress, and the small size fits well when space is limited.

This medium-sized progress bar is filled up to 30% and is colored orange. It's suitable for neutral or medium priority tasks.

This example produces a large yellow-colored progress bar filled up to 40%. The large size makes it highly visible, and the yellow color indicates caution or attention.

This example produces a custom-sized green-colored progress bar, 50% complete. It's an excellent example of how you can customize the dimensions of your progress bar according to your design requirements.

This example produces a small blue-colored progress bar filled up to 60%. The blue color can represent a task of normal priority, while the small size helps it fit in compact spaces.

This example shows a small-sized purple progress bar with an indeterminate progress state. This is useful when you want to indicate something is happening but the amount of progress is unknown, such as loading data.

Did you know?

Creative Idea No. 1

Progress bar with dynamic value: This is especially useful for scenarios where the progress value isn't static, like in file uploads or time-bound operations. You can update the value prop with state or any dynamic data.

Code

Creative Idea No. 2

Progress bar with steps: This can be used when you need to visualize the progress of a multi-step process, like a form wizard or step-by-step tutorial. Here's an example with a three-step process.

1 / 6

Code

Creative Idea No. 3

A Countdown Progress Bar: a versatile progress bar with a countdown timer, which displays a progress bar that decreases gradually over the input duration, by default 10 seconds, from 100% to 0%.

The countdown and the progress bar are linked through a useEffect hook that recalculates the currentSecond based on the progress bar's current value. This makes sure the displayed remaining time is always in sync with the progress bar's state.

Countdown from:

10s

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.