Progress Bar
Progress bars visually show system loading progress, such as uploading a file or loading a page, as well as user progress, like filling out a form.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6090588e0346e26cbecdac79_progress_bar_intro.png)
Anatomy
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/6090593c0346e2c3c5cdb28c_progress_bar_anatomy.png)
Types
Loading
Loading progress bars are used to convey system loading status, such as a file uploading or a page loading. These have an animated “candy stripe” pattern.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/60905b07c0326d4628b37581_progress_bar_animated.gif)
Progress
Progress bars without the loading animation are used to track non-system progress, like a user’s completion through a form or page.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/60905bb3d3595f11d84fd223_progress_bar_types2.png)
Behavior
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/60905c1f537953d8061559dd_progress_bar_behavior.png)
Responsive Widths
Progress bar is a block element that fills up the width of its container.
Specifications
Styling
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/60905cf2a00fcc3b0e641a38_progress_bar_styling.png)