Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen.
Progress as a group When displaying progress for a sequence of processes, indicate overall progress rather than the progress of each activity.
Circular progress
Circular progress is built with a group of HTML elements, below is a detailed example.
<div class="progress-circular">
<div class="progress-circular-wrapper">
<div class="progress-circular-inner">
<div class="progress-circular-left">
<div class="progress-circular-spinner"></div>
</div>
<div class="progress-circular-gap"></div>
<div class="progress-circular-right">
<div class="progress-circular-spinner"></div>
</div>
</div>
</div>
</div>Add additional color classes (e.g. brand colors: -primary, -secondary, or helper colors: -danger, -info, -success, -warning) to change the appearance of individual circular progress.
<div class="progress-circular progress-circular-primary">
<div class="progress-circular-wrapper">
<div class="progress-circular-inner">
<div class="progress-circular-left">
<div class="progress-circular-spinner"></div>
</div>
<div class="progress-circular-gap"></div>
<div class="progress-circular-right">
<div class="progress-circular-spinner"></div>
</div>
</div>
</div>
</div>Linear progress
Most of the details about linear progress have been covered in Components/Progress documentation. Read more about Progress component.
Indeterminate linear progress
When indicators are indeterminate they request that the user wait while something finishes when it’s not necessary to indicate how long it will take.
Create an indeterminate linear progress by adding .progress-bar-indeterminate class.
<div class="progress">
<div class="progress-bar progress-bar-indeterminate" role="progressbar"></div>
</div>