Bootstrap Progress

Bootstrap Progress Overview

A progress bar starts with an outer .progress container and an inner .progress-bar element whose width is set inline as a percentage. The inner bar carries role="progressbar" along with aria-valuenow, aria-valuemin, and aria-valuemax attributes so assistive technology can announce the current completion percentage.

Visual variants include progress-bar-striped for diagonal stripes, progress-bar-animated for a moving stripe animation (indicating active, ongoing work), and stacking multiple progress-bar elements inside one .progress container to show several segments of a total.

Bootstrap Progress Example

<div class="progress" role="progressbar" aria-label="Upload progress" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 65%">65%</div>
</div>

<div class="progress mt-3">
  <div class="progress-bar bg-success" style="width: 40%">Images</div>
  <div class="progress-bar bg-warning" style="width: 25%">Videos</div>
  <div class="progress-bar bg-danger" style="width: 15%">Documents</div>
</div>

The first progress bar shows an animated, striped bar at 65% with aria attributes describing an upload's current state. The second example stacks three colored segments inside one progress container to represent different categories of storage usage totaling 80% of the available space.

Top 10 Bootstrap Progress Examples

These are the progress bar patterns you'll use to visualize completion and status.

Popular Real-World Bootstrap Progress Examples

These progress bar patterns are common for uploads, onboarding, and resource usage tracking.

Best Practices

• Always include role="progressbar" with matching aria-valuenow, aria-valuemin, and aria-valuemax attributes.
• Update the width style and ARIA value together whenever progress changes via JavaScript.
• Use progress-bar-animated only for active, ongoing tasks, not completed or static values.
• Choose a color that reflects status, such as bg-danger for critically low remaining values.
• Keep stacked progress bar segments labeled or paired with a legend explaining each color.
• Use a thinner custom height for subtle, secondary progress indicators.
• Show a text label or percentage when precision matters to the user, not just a visual bar.

Common Mistakes

• Setting the visual width without updating the corresponding aria-valuenow attribute.
• Using progress-bar-animated on a bar that represents a static, already-completed value.
• Stacking too many thin segments, making individual categories hard to distinguish.
• Forgetting an aria-label on the outer progress container describing what is being tracked.
• Hardcoding percentage text that doesn't match the actual width value.
• Using a progress bar for binary complete/incomplete states where a badge or icon would be clearer.

Key Takeaways

• progress and progress-bar together create a track and its filled segment.
• ARIA attributes (role, aria-valuenow, aria-valuemin, aria-valuemax) make progress bars accessible.
• Striped and animated modifiers help distinguish active, ongoing tasks from static values.
• Multiple progress-bar elements can stack inside one progress container for category breakdowns.
• Color should reflect the actual status or urgency represented by the progress value.