Components
Progress
Communicate determinate and indeterminate progress with accessible labels, contextual variants, sizes, and motion-safe animation.
Components
Progress indicators
Use a native progressbar name and value for determinate work. Set the bar width from the same value your application exposes through ARIA.
Determinate progress
Upload68%
HTML · Determinate progress
<div class="bs-progress" role="progressbar" aria-label="Upload" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100">
<div class="bs-progress-bar" style="width: 68%"></div>
</div>Contextual and striped bars
HTML · Contextual striped progress
<div class="bs-progress" role="progressbar" aria-label="Import" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100">
<div class="bs-progress-bar bs-progress-warning bs-progress-striped bs-progress-animated" style="width: 76%"></div>
</div>Indeterminate progress
HTML · Indeterminate progress
<div class="bs-progress bs-progress-indeterminate" role="progressbar" aria-label="Preparing export">
<div class="bs-progress-bar bs-progress-info"></div>
</div>Accessible value
Keep aria-valuenow synchronized with the visual width and give every progressbar an accessible name.
Unknown duration
Omit value attributes for indeterminate work. Do not invent a percentage when completion cannot be measured.
Motion
Striped and indeterminate animations stop automatically when the user requests reduced motion.
Progress API
| Class | Purpose |
|---|---|
.bs-progress | Track and accessible progressbar boundary. |
.bs-progress-bar | Value bar whose width represents completion. |
.bs-progress-sm, .bs-progress-lg | Compact and emphasized track sizes. |
.bs-progress-primary, .bs-progress-info, .bs-progress-success, .bs-progress-warning, .bs-progress-danger | Semantic value colors. |
.bs-progress-striped, .bs-progress-animated | Optional striped treatment and motion. |
.bs-progress-indeterminate | Unknown-duration state with reduced-motion fallback. |