Bootstrap 5 progress bars display completion status for tasks, uploads, skills and loading states. This page covers 4 progress bar patterns — basic, striped, animated and skills layout — each ready to copy directly.

Quick Setup

Progress bars need only Bootstrap 5 CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

Key Classes Reference

ClassWhat It Does
.progressRequired wrapper element
.progress-barThe filled bar inside the wrapper
.progress-bar-stripedAdds diagonal stripe pattern
.progress-bar-animatedAnimates the stripe pattern
.bg-successGreen progress bar
.bg-warningYellow progress bar
.bg-dangerRed progress bar
.bg-infoCyan progress bar
style="width:75%"Sets the progress percentage
aria-valuenowAccessibility attribute for current value

1. Basic Bootstrap 5 Progress Bars

Progress bars in all Bootstrap 5 color variants with different widths.

2. Bootstrap 5 Striped Progress Bars

Add diagonal stripes using progress-bar-striped. Combine with different colors for variety.

3. Bootstrap 5 Animated Progress Bar

Moving stripe animation using progress-bar-animated. Useful for loading states and file uploads.

4. Bootstrap 5 Skills Progress Bars

Progress bars used to display skill levels. Common on portfolio and resume pages.

Frequently Asked Questions

Set the width style and aria-valuenow attribute: const bar = document.querySelector('.progress-bar'); bar.style.width = '75%'; bar.setAttribute('aria-valuenow', 75). For animated progress use setInterval to increment the value and update both the style and aria attribute.
Set a custom height on the progress wrapper: <div class='progress' style='height:20px'>. The inner progress-bar div fills the height automatically. Bootstrap's default height is 1rem (16px).
Add text directly inside the progress-bar div: <div class='progress-bar' style='width:75%'>75%</div>. The text displays inside the bar. Make sure the bar is tall enough to show the text — use height:20px or more on the progress wrapper.
Add multiple progress-bar divs inside one progress wrapper: <div class='progress'><div class='progress-bar bg-success' style='width:40%'></div><div class='progress-bar bg-warning' style='width:30%'></div><div class='progress-bar bg-danger' style='width:20%'></div></div>. The bars stack side by side.
Start the bar at width 0% and animate to the target value: const bar = document.querySelector('.progress-bar'); bar.style.transition = 'width 1s ease'; setTimeout(() => { bar.style.width = '75%'; }, 100). The slight delay ensures the transition fires after the element renders.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Spinner Loading

View examples →

Bootstrap 5 Badge Example

View examples →

Bootstrap 5 Alert Example

View examples →