Bootstrap Progress Bars: 22 Free Examples & How to Choose

This article answers directly: Bootstrap progress bars are UI components that visually indicate the completion status of a task, and this guide presents 22 free, ready-to-use examples (from basic animated bars to stacked and striped variants) and explains how to select the right one for your project. You’ll learn the underlying CSS classes, when to use each style, and common pitfalls to avoid.

Formula

The core of any Bootstrap progress bar is the percentage of completion, calculated as:

Percentage = (Completed / Total) × 100

Where:

• Completed – the amount of work or value already done (in the same unit as Total).
• Total – the total amount of work or value to be completed (in the same unit as Completed).

The result is a number between 0 and 100, which you then set as the width of the inner bar element in Bootstrap. For example, if you have completed 5 out of 8 hours of a task, the percentage is (5/8) × 100 = 62.5%.

Worked Example

Using the calculator above with the default values:

1. Total task duration = 8 hours
2. Completed hours = 5 hours
3. Percentage = (5 / 8) × 100 = 62.5%
4. Remaining hours = 8 – 5 = 3 hours

So the progress bar should be set to 62.5% width, and you have 3 hours left. The calculator shows 62.5% and 3 hours, matching this calculation.

Background: How Bootstrap Progress Bars Work

Bootstrap progress bars are built with two nested elements: an outer .progress container and an inner .progress-bar that gets its width set via inline style. The outer div has a fixed height (default 1rem) and a light gray background, while the inner bar is colored and fills from left to right. The width is typically set as a percentage (e.g., style="width: 62.5%").

The component is purely visual; it does not track any real progress on its own. You must update the width dynamically using JavaScript or a framework like Vue or React. Bootstrap provides utility classes for colors, stripes, and animation, but the logic is up to you.

22 Free Examples (with Code Snippets)

Below are 22 variations you can copy directly. Each example assumes you have Bootstrap 5 CSS included.

1. Basic bar: <div class="progress"><div class="progress-bar" style="width:50%"></div></div>
2. With label: Add text inside the bar, e.g., 50%.
3. Striped: Add .progress-bar-striped.
4. Animated stripes: Add .progress-bar-animated.
5. Green (success): Use .bg-success.
6. Blue (primary): Use .bg-primary (default).
7. Yellow (warning): Use .bg-warning.
8. Red (danger): Use .bg-danger.
9. Info (light blue): Use .bg-info.
10. Dark: Use .bg-dark.
11. Multiple bars stacked: Place several .progress-bar inside one .progress.
12. Different heights: Change the height style on the .progress (e.g., height: 30px).
13. Rounded bar: Add .rounded-pill to the outer div.
14. No rounded corners: Add .rounded-0.
15. Bar with a striped pattern and label: Combine striped + text.
16. Indeterminate (no width): Use .progress-bar without width and add .progress-bar-animated with a CSS animation (not native).
17. Accessible bar: Add role="progressbar", aria-valuenow, aria-valuemin="0", aria-valuemax="100".
18. Bar with a custom color: Use inline background-color.
19. Bar with a gradient: Add a custom CSS class with a linear-gradient.
20. Bar with a shadow: Add shadow class to the outer div.
21. Bar with a tooltip: Wrap with a data-bs-toggle="tooltip".
22. Bar with a percentage counter: Use a small JavaScript to update the width and text.

How to Choose the Right Progress Bar

Selecting among these depends on your context:

• Basic vs. striped: Use basic for simple, static progress. Use striped for a more textured look, especially when the bar is wide.
• Animated: Animated stripes suggest ongoing activity (e.g., file upload). Use sparingly as it can be distracting.
• Color: Match Bootstrap’s semantic colors: green for success/completion, red for errors, yellow for warnings, blue for primary actions. For neutral progress, use gray.
• Stacked bars: Use when you need to show multiple segments (e.g., a budget split into categories).
• Height: Default 1rem is fine for most cases. Increase to 20-30px for better visibility on mobile or for touch targets.
• Accessibility: Always include ARIA attributes if the bar is dynamic. This is crucial for screen readers.

Common Problems and Misconceptions

One frequent mistake is forgetting to set the width as a percentage. If you set width: 50 instead of width: 50%, the bar will not render correctly. Another issue is using .progress-bar without the parent .progress – the styling will break.

Misconception: Animated stripes automatically reflect real progress. They don’t; they only animate the stripes. You still need to update the width via JavaScript. Also, Bootstrap 5 removed the .progress-bar background color default; you must add a .bg-* class or set a custom background.

Comparisons: Bootstrap vs. Other Libraries

Bootstrap progress bars are simple and dependency-free (only CSS). In contrast, libraries like ProgressBar.js offer more advanced features (SVG, animations, circular bars) but require learning a new API. Tailwind CSS requires building your own progress bar from scratch, giving full control but more work. For most projects, Bootstrap’s built-in bars are sufficient and the fastest to implement.

Frequently Asked Questions

How do I make a progress bar update in real time?

You need JavaScript to change the style.width property of the .progress-bar element. For example, document.getElementById('myBar').style.width = '70%'. You can call this inside a timer or after an AJAX request.

Can I use a progress bar without Bootstrap CSS?

Yes, you can write your own CSS with a div and a width percentage. Bootstrap just provides convenient classes and consistent styling. The underlying concept is the same.

Why is my progress bar not showing any color?

In Bootstrap 5, the default .progress-bar has no background color. Add a .bg-primary or another .bg-* class, or set an inline background-color.

How do I make the progress bar rounded?

Add the .rounded-pill class to the outer .progress div. For example, <div class="progress rounded-pill">.

Is it possible to have a progress bar with a gradient?

Yes, override the background property with a CSS gradient. For instance, background: linear-gradient(to right, #ff0000, #00ff00).

What does the aria-valuenow attribute do?

It tells screen readers the current value of the progress bar. It should be updated dynamically along with the width. It does not affect the visual appearance.

Limitations and Alternatives

Bootstrap progress bars are horizontal only; they cannot display circular or semi-circular progress without additional CSS or libraries. For circular progress, consider using a canvas-based library or an SVG solution. Also, the default animation is limited to stripes; for other effects (e.g., a sliding bar), you need custom CSS. Despite these limits, for most web interfaces, the built-in component is the most straightforward and accessible choice.

Related

• Final Fantasy Resonance PC Settings Guide
• PowerShell Find File: Search Files & Folders
• Disable Action Center Win10: Steps & Fixes

in t | Task duration | hours | 8 | 0
in done | Completed hours | hours | 5 | 0
out pct | Completion percentage | % | (done / t) * 100 | 1
out remain | Remaining hours | hours | t - done | 1