Bootstrap 5 3 Progress Bar: Free HTML Example

This page provides a free, copy-paste HTML example of a Bootstrap 5 progress bar that is accessible to screen readers and keyboard users. You will learn the correct ARIA attributes, how to set the width, and how to handle striped and animated variants, all with working code you can drop into your project.

Formula

The width of the progress bar is calculated as:

Width (%) = (Progress value / Maximum value) × 100

Where:

• Progress value – the current amount completed (in the same unit as max, often percent).
• Maximum value – the total amount when the bar is full (100 for percent, or any other total).

The result is the percentage width that the inner bar should occupy.

Worked Example

Using the default values from the calculator (progress = 50, max = 100):

1. Divide progress by max: 50 ÷ 100 = 0.5
2. Multiply by 100 to get a percentage: 0.5 × 100 = 50%

So the bar should be 50% wide.

Why Accessibility Matters in Progress Bars

A progress bar is a visual indicator, but not all users can see it. Screen reader users rely on the role="progressbar" attribute along with aria-valuenow, aria-valuemin, and aria-valuemax to know the current status. Without these, the bar is just an empty div to assistive technology. Bootstrap 5’s progress component includes these by default, but only if you add them correctly. The example below shows the minimal accessible markup.

Basic Accessible Bootstrap 5 Progress Bar

Here is a simple, fully accessible progress bar. Notice the role and aria-* attributes on the inner div, and the style="width: 50%" that sets the visual width.

<div class="progress" role="progressbar" aria-label="Loading progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 50%"></div>
</div>

This works in Bootstrap 5.3 and 5.0. The aria-label gives a name to the bar, which is essential for screen readers. If you omit it, the bar may be announced as an unnamed progress bar.

Striped, Animated, and Labeled Variants

You can add visual styles without losing accessibility:

• Striped: add .progress-bar-striped to the inner div.
• Animated: add .progress-bar-animated (works with striped).
• Label: put text inside the inner div, e.g., 50%. Screen readers will read it as part of the progress bar.

Example with all three:

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

Note: .progress-bar-animated requires the striped class to show the animation effect in most browsers.

Common Mistakes and How to Avoid Them

Several pitfalls can break accessibility or display:

• Missing ARIA attributes – Without aria-valuenow, aria-valuemin, and aria-valuemax, screen readers cannot determine the value. Always include them.
• Missing label – An unnamed progress bar is confusing. Use aria-label or a visible <label> with aria-labelledby.
• Width not set as percentage – The width style must be a percentage (e.g., style="width: 50%"), not a pixel value. Bootstrap’s CSS uses percentages for the inner bar.
• Using aria-valuenow outside the valid range – The value must be between aria-valuemin and aria-valuemax.
• Forgetting the role="progressbar" on the container – Bootstrap 5 places the role on the outer div, not the inner bar. Keep it there.

How to Choose Between Bootstrap 5.0 and 5.3

Both versions support the same progress bar markup. The main differences are in other parts of the framework. For progress bars, you can use the same code in 5.0, 5.1, 5.2, and 5.3. The only notable change is that Bootstrap 5.3 added more color modes (dark mode) and some CSS variables. If you are using a CDN, pick the latest stable version (5.3.x) for better performance and security. The example above works identically in all.

Alternatives to Bootstrap Progress Bars

If you don’t want to use Bootstrap, you can build a progress bar with plain HTML and CSS. The same ARIA attributes are required. Here is a minimal example:

<div class="progress" role="progressbar" aria-label="Simple progress" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div style="width: 25%; background-color: #007bff; height: 20px;"></div>
</div>

Libraries like progressbar.js offer more animation options, but they require JavaScript. Bootstrap’s version is simpler and has no JS dependency for basic use.

Frequently Asked Questions

Do I need JavaScript to make a Bootstrap progress bar work?

No. The basic progress bar is pure CSS and HTML. JavaScript is only needed if you want to animate the width dynamically (e.g., update the bar as a file uploads). You can update the style="width" and aria-valuenow with JavaScript or a framework like Vue or React.

Why is my progress bar not showing the striped pattern?

Make sure you have added both .progress-bar-striped and .progress-bar classes on the inner div. Also, the striped effect uses a CSS gradient that may not appear if the bar width is very small (e.g., 1%). Check that you haven’t overridden the background-image property.

Can I use a progress bar without a visible label?

Yes, but you should still provide an accessible name via aria-label or aria-labelledby. A visible label is not required, but it helps all users understand the context. If you omit both, the bar is announced as just “progress barâ€� with no meaning.

What is the difference between aria-valuenow and the width style?

aria-valuenow is the machine-readable value for assistive technologies. The width style is the visual representation. They should match, but if they don’t, screen readers will report the aria-valuenow, not the visual width. Always keep them in sync.

Does the progress bar work with keyboard navigation?

Yes, but only if you add tabindex="0" to the container and make it focusable. By default, a progress bar is not interactive, so keyboard users don’t need to focus it. If you want to allow users to change the value, you would need to add buttons or a slider, which is a different component.

Can I use a progress bar to show a percentage above 100%?

Yes, technically. If you set aria-valuemax to 200 and aria-valuenow to 150, the bar will fill to 75% of its container. But the visual width is based on the ratio, not the raw value. For percentages over 100, it’s better to cap the width at 100% and show the numeric value separately.

Related

• Google Hangouts Black Screen Share: Fixes
• Resident Evil Games Connected? What Carries Over
• Change Photos Backup Quality: Full Guide

in pct | Progress value | % | 50 | 0
in max | Maximum value | % | 100 | 1
out width | Bar width | % | (pct / max) * 100 | 0