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.
To import this component:
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
Creative Idea No. 2
1 / 6
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.