Progress

How it works

Bootstrap's progress component creates an accessible progress bar using semantic HTML attributes. The aria-valuenow attribute indicates current progress, while the bar's width adjusts visually (from 0% to 100%). For accessibility, aria-valuemin and aria-valuemax define the progress range, and aria-label provides a descriptive label for screen readers.

Bar sizing

Width

Control the progress bar width using either inline styles (style="width: X%") or Bootstrap's utility classes (w-127). The width represents the completion percentage of your process.

Height

Customize the progress bar height by applying the style="height" property to the outer progress container. This allows you to create both subtle and prominent progress indicators.

Labels

Add labels inside progress bars to provide explicit progress information. Labels can include text, icons, or both to enhance visual communication.

For longer labels, use overflow-visible to allow text to extend beyond the progress bar. The text-dark class ensures readability against lighter backgrounds.

Contextual Backgrounds

Use Bootstrap's background utility classes (bg-*) to convey meaning through color. Each contextual class is paired with an appropriate icon for enhanced visual feedback.

Multiple Bars

Stack multiple progress bars using progress-stacked to show different aspects or stages of a process. Each segment can have its own style, width, and label.

Striped Bars

Add visual texture with progress-bar-striped class. Striped progress bars can help distinguish between different types of progress or draw attention to specific progress indicators.

Animated Stripes

Combine progress-bar-striped and progress-bar-animated classes to create an animated effect, perfect for indicating active processes or loading states.

Gradient Progress

Create visually appealing progress bars using CSS gradients. This can add a modern touch to your progress indicators while maintaining functionality.