Progress Bar
The Progress bar component visually represents the completion status of a task or process. It helps users understand the progress they are making, providing feedback and setting expectations.
Usage
- Progress bars inform about ongoing processes and system status.
- Display task completion status.
- Indicate the progress of multi-step forms.
Anatomy
The progress bar, an essential user interface element, incorporates circular bar indicator and bar indicator, meticulously designed to visually represent the progress value with precision and clarity, facilitating seamless monitoring and tracking of progress throughout various tasks or processes.
Variant
Progress bar comes in two variants percentage and stepper.
Percentage Progress Bar
Stepper Progress Bar
Options
Progress bar options in percentage and numbers.
Percentage / 0%
Percentage / 25%
Percentage / 50%
Percentage / 75%
Percentage / 100%
Stepper / 0
Stepper / 1
Stepper / 2
Stepper / 3
Stepper / 4
Size
Progress bar are available in small and large sizes.
Small
Large
Specifications
Structure and spacing measurements for progress bar.
Live Demo
The Progress Bar is demonstrated in a live environment in this demo.