Summarize this article with:
Users hate waiting without knowing how long something takes.
The Bootstrap progress bar solves this by giving visual feedback during file uploads, form submissions, and loading states.
This component works across Chrome, Firefox, Safari, and Edge with zero extra configuration.
You get striped patterns, color variations, animations, and stacked bars out of the box.
This guide covers everything from basic HTML structure to Sass variable customization.
You will learn the exact classes, ARIA accessibility attributes, and code examples needed to build progress indicators that actually help your users.
What is Bootstrap Progress Bar
Bootstrap progress bar is a frontend UI element that displays completion percentage through visual feedback.
The component uses two nested div elements with specific classes to create a status indicator for tasks, file uploads, or any process that needs tracking.
Unlike the native HTML progress element, Bootstrap’s version gives you full control over styling, animations, and stacked bar configurations.
Mark Otto and Jacob Thornton designed this Bootstrap component to work across Chrome, Firefox, Safari, and Edge without compatibility headaches.
Bootstrap Progress Bar Examples
Bootstrap Progress Bars Example
Tolerance Levels for Bootstrap Progress Bar
Bootstrap Progress Bar Diamond Style
Bootstrap progress bars by Sushma
Bootstrap Progress Bar List
Bootstrap Progress Bars by Iain Kiloh
Progress Bar – Tiles
Progress Bar Animation On Page Load
Progress Bar Style 17
Progress Bar With Glow
Light Blue Progress Bar
Animated Progress Bar
Circle Progress Bar
Progress bar responsive
Bootstrap 4 Circle Progress bar with percent loading
Bootstrap Progress bar Animation
How Does Bootstrap Progress Bar Work
The progress component relies on CSS width properties and accessibility attributes to function properly.
Search engines and screen readers can interpret the bar’s current value through proper semantic markup.
What HTML Structure Does Bootstrap Progress Bar Require
Two div elements create the structure: an outer container with .progress class and an inner element with .progress-bar class.
The wrapper establishes maximum value while the inner div represents current progress through inline width styling.
How Does the Width Property Control Progress Display
Set the width using inline styles like style="width: 75%" or Bootstrap’s utility classes such as w-25, w-50, or w-75.
The percentage value directly correlates to how much of the bar fills visually.
What ARIA Attributes Make Progress Bars Accessible
ARIA attributes tell assistive technologies the bar’s current state, minimum, and maximum values.
Include these three on the .progress-bar element:
aria-valuenow– current progress valuearia-valuemin– starting point (typically 0)aria-valuemax– completion point (typically 100)
Screen readers announce these values to users who cannot see the visual indicator.
What Are Bootstrap Progress Bar Classes
Four core CSS classes control the appearance and behavior of progress indicators in Bootstrap.
What Does the .progress Class Do
The .progress class creates the container element with default height, background color, and border radius.
It sets overflow to hidden so the inner bar stays contained within boundaries.
What Does the .progress-bar Class Do
This class applies the primary blue background, sets up CSS transitions for smooth width changes, and handles text alignment for labels.
The transition property animates width changes over 0.6 seconds with an ease timing function.
What Does the .progress-bar-striped Class Do
Adds a diagonal striped gradient pattern using CSS3 linear gradients.
The stripes create visual distinction when you need multiple bars or want to indicate an active process.
What Does the .progress-bar-animated Class Do
This class activates CSS keyframes animation that moves the striped pattern from right to left.
Combine it with .progress-bar-striped for the animated effect; it does nothing on solid bars.
How to Style Bootstrap Progress Bar Colors
Background utility classes from Bootstrap’s CSS framework change the bar’s appearance instantly.
What Background Classes Change Progress Bar Color
Five contextual color classes provide semantic meaning to your progress indicators:
bg-primary– default bluebg-success– greenbg-info– teal/cyanbg-warning– yellow/orangebg-danger– red
How to Apply bg-success to Progress Bars
Add bg-success to the .progress-bar element for green coloring, typically used for completed tasks or positive status.
How to Apply bg-info to Progress Bars
The bg-info class produces a teal shade, good for neutral information or download progress.
How to Apply bg-warning to Progress Bars
Yellow/orange bg-warning signals caution states like storage nearly full or approaching deadlines.
How to Apply bg-danger to Progress Bars
Red bg-danger indicates critical states, errors, or values exceeding safe thresholds.
How to Add Labels to Bootstrap Progress Bar
Text labels show exact percentage values inside the colored bar area.
Where Does Label Text Go Inside Progress Bar
Place label text directly between the opening and closing tags of the .progress-bar div element.
The text inherits white color by default and centers within the filled portion.
How Does Overflow Hidden Affect Label Visibility
The parent .progress container clips any content extending beyond its boundaries.
Labels on narrow bars (below 20% width) get cut off or become unreadable, so consider external labels for small values.
How to Customize Bootstrap Progress Bar Height
The default progress bar height is 1rem (16px), but inline styles let you adjust this for your user interface needs.
What Inline Style Changes Progress Bar Height
Apply style="height: 20px" directly to the .progress container element, not the inner bar.
The child .progress-bar inherits height automatically through flexbox layout.
What Are Common Height Values for Progress Bars
Thin indicators work at 4-8px for subtle loading states; standard UI elements use 16-24px; large dashboard displays go up to 30-40px.
Match height to your overall user experience and visual hierarchy.
How to Create Striped Bootstrap Progress Bars
Striped patterns add visual distinction to progress indicators, especially useful when displaying multiple bars or active processes.
What Class Creates the Striped Pattern
Add .progress-bar-striped alongside .progress-bar to apply the diagonal gradient pattern.
CSS3 linear-gradient creates the stripes at a 45-degree angle using rgba values.
How to Combine Striped Style with Color Classes
Stack multiple classes in sequence: class="progress-bar progress-bar-striped bg-success" for a green striped bar.
Works with all contextual background colors including bg-info, bg-warning, and bg-danger.
How to Animate Bootstrap Progress Bar
Animated stripes create movement that signals active processing to users waiting on task completion.
What Class Activates the Animation
The .progress-bar-animated class triggers keyframe animation that shifts the striped gradient pattern continuously.
Requires .progress-bar-striped to function; solid bars show no visible effect.
How Does CSS Animation Work in Progress Bars
The @keyframes rule named progress-bar-stripes moves background-position from right to left over 1 second with linear timing, then loops infinitely.
Sass variables control timing: $progress-bar-animation-timing: 1s linear infinite.
How to Stack Multiple Bootstrap Progress Bars
Stacked bars display multiple values within a single progress container, perfect for showing disk space allocation or multi-part task completion.
What Container Structure Holds Multiple Bars
Bootstrap 5.3 uses .progress-stacked as a wrapper around multiple .progress elements.
Earlier versions place multiple .progress-bar divs inside one .progress container directly.
How to Combine Different Colors in Stacked Bars
Apply different bg- classes to each segment:
- First bar:
bg-successat width 35% - Second bar:
bg-warningat width 20% - Third bar:
bg-dangerat width 10%
Total percentages should not exceed 100% or the bar overflows its container.
What CSS Variables Customize Bootstrap Progress Bars
Sass preprocessing and CSS custom properties let you override default styling without writing new selectors.
What Sass Variables Control Progress Bar Defaults
Key Sass variables in _variables.scss:
$progress-height: 1rem$progress-bg: $gray-200$progress-border-radius: $border-radius$progress-bar-color: $white$progress-bar-bg: $primary$progress-bar-transition: width .6s ease
How to Override Default Progress Bar Styles
Modify variables before importing Bootstrap’s Sass files, or use CSS custom properties on the .progress element directly in your stylesheet.
The --bs-progress- variables in Bootstrap 5 accept runtime changes through JavaScript DOM manipulation.
Bootstrap Progress Bar Code Examples
Working code snippets you can copy directly into your projects.
Basic Progress Bar Code
“ <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> </div> </div> `
Colored Progress Bar Code
` <div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> 50% </div> </div> `
Animated Striped Progress Bar Code
` <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> </div> </div> `
Stacked Progress Bar Code
` <div class="progress-stacked"> <div class="progress" role="progressbar" style="width: 15%"> <div class="progress-bar bg-success"></div> </div> <div class="progress" role="progressbar" style="width: 30%"> <div class="progress-bar bg-info"></div> </div> <div class="progress" role="progressbar" style="width: 20%"> <div class="progress-bar bg-warning"></div> </div> </div> `
Test these examples across Chrome, Firefox, Safari, and Edge for cross-browser compatibility before deploying to production.
FAQ on Bootstrap Progress Bar
How do I create a basic Bootstrap progress bar?
Create two nested div elements. The outer div gets the .progress class, the inner div gets .progress-bar class with inline width styling and ARIA attributes for accessibility.
How do I change Bootstrap progress bar color?
Add contextual background classes to the .progress-bar element. Options include bg-success (green), bg-info (teal), bg-warning (yellow), and bg-danger (red).
How do I animate a Bootstrap progress bar?
Combine two classes on the .progress-bar element: .progress-bar-striped and .progress-bar-animated. The animation moves the striped pattern continuously from right to left.
How do I add a label to Bootstrap progress bar?
Place text directly inside the .progress-bar div element. The label displays centered within the filled portion. Keep bars above 20% width or labels get clipped by overflow hidden.
How do I change Bootstrap progress bar height?
Apply inline style to the .progress container element, not the inner bar. Use style=”height: 20px” or any pixel/rem value that fits your design.
How do I stack multiple Bootstrap progress bars?
In Bootstrap 5.3, wrap multiple .progress elements inside a .progress-stacked container. Earlier versions place multiple .progress-bar divs directly inside one .progress wrapper.
How do I update Bootstrap progress bar dynamically?
Use Ajax or vanilla JavaScript to modify the width style property and aria-valuenow attribute. Update both values simultaneously to maintain accessibility for screen readers.
Why is my Bootstrap progress bar not showing?
Check that width is set on .progress-bar element, Bootstrap CSS is loaded correctly, and no conflicting styles override the component. Missing width property causes invisible bars.
How do I make a striped Bootstrap progress bar?
Add .progress-bar-striped class to the .progress-bar element. CSS3 linear-gradient creates diagonal stripes at 45 degrees. Combine with any bg- color class.
Is Bootstrap progress bar accessible?
Yes, when properly implemented. Include role=”progressbar” plus aria-valuenow, aria-valuemin, and aria-valuemax attributes. Screen readers announce these values to users with visual impairments.
Conclusion
The Bootstrap progress bar remains one of the most practical components for displaying task progress and completion percentage in web applications.
You now understand the HTML structure, CSS classes, and accessibility requirements that make this component work.
Customization options through Sass variables and background utilities give you full control over height, colors, and animations.
Stacked bars handle complex scenarios like disk space allocation or multi-step wizard completion.
The component integrates with responsive design principles and works reliably whether you load Bootstrap via npm, CDN, or local files.
Test your progress indicators with screen readers to verify ARIA implementation.
Start with basic examples, then add striped gradients and CSS animation effects as needed.
