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.

Interactive Progress

Create dynamic progress bars that respond to user interactions and update in real-time. This example demonstrates how to control progress programmatically with JavaScript, including start, pause, and reset functionality.

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.

Detailed Labels & Status

Enhance progress bars with comprehensive status information, file details, time estimates, and error states. These examples show best practices for providing meaningful feedback to users during long-running operations.

System Monitoring Dashboard

Use contextual colors to create meaningful system monitoring interfaces. This example demonstrates how to build a real-world system health dashboard with CPU, memory, disk, and temperature monitoring using appropriate color coding and status indicators.

Project Management Progress

Create sophisticated project tracking interfaces using stacked progress bars. This example shows how to visualize different project phases, include tooltips for detailed information, and provide comprehensive project status with completion estimates.

Data Processing & Operations

Use striped progress bars for ongoing operations like data processing, backups, and synchronization. The striped pattern indicates active processing and helps users understand that work is being performed, even when progress appears slow.

Real-time Loading States

Create engaging loading experiences with animated progress bars. These examples show how to combine progress indicators with spinners, status badges, and descriptive text to create comprehensive loading states for dashboards and AI processing.

Custom Styling & Modern Design

Create stunning progress bars with custom CSS styling, gradients, glassmorphism effects, and modern design patterns. These examples show how to extend Bootstrap's progress component with contemporary visual effects while maintaining accessibility.

Accessibility Best Practices

Implement fully accessible progress bars with proper ARIA attributes, screen reader support, live regions, and descriptive labels. These examples demonstrate how to create progress indicators that work for all users, including those using assistive technologies.

Developer Tips & Best Practices

class ProgressManager {
  constructor(element) {
    this.element = element;
    this.progressBar = element.querySelector('.progress-bar');
    this.statusElement = element.querySelector('[data-progress-status]');
  }

  update(percentage, status = '') {
    this.progressBar.style.width = percentage + '%';
    this.element.setAttribute('aria-valuenow', percentage);
    if (this.statusElement) this.statusElement.textContent = status;
  }

  complete(message = 'Complete!') {
    this.update(100, message);
    this.progressBar.classList.add('bg-success');
  }

  error(message = 'Error occurred') {
    this.progressBar.classList.add('bg-danger');
    if (this.statusElement) this.statusElement.textContent = message;
  }
}