Previous: Advanced Forms Next: Bootstrap Flex

Bootstrap 5 Progress Bars Tutorial

Master static and dynamic progress indicators with Bootstrap 5.

What are Progress Bars?

Progress bars are visual indicators that show the completion status of a task or operation. Common use cases include file upload/download progress, form completion status, loading states, skill indicators, survey completion, and installation progress.

1. Basic Progress Bar

<!-- Basic progress bar -->
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- With ARIA attributes for accessibility -->
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
Class/AttributePurpose
.progressContainer for progress bars
.progress-barThe actual bar that fills
role="progressbar"ARIA role for accessibility
aria-valuenowCurrent progress value
aria-valueminMinimum value (usually 0)
aria-valuemaxMaximum value (usually 100)
style="width: X%"Visual width of the bar

2. Progress Bar with Labels

<!-- Label inside the bar -->
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

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

<!-- Label outside the bar -->
<div class="mt-3">
  <div class="d-flex justify-content-between mb-1">
    <span>File upload progress</span>
    <span>45%</span>
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

3. Progress Bar Colors

<div class="progress mb-3">
  <div class="progress-bar bg-primary" role="progressbar" style="width: 45%">45%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar bg-success" role="progressbar" style="width: 60%">60%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar bg-info" role="progressbar" style="width: 75%">75%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 30%">30%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 85%">85%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar bg-dark" role="progressbar" style="width: 50%">50%</div>
</div>
<div class="progress">
  <div class="progress-bar bg-secondary" role="progressbar" style="width: 20%">20%</div>
</div>

4. Striped Progress Bars

<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 45%">45%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 60%">60%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 75%">75%</div>
</div>

5. Animated Striped Progress Bars

<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 45%">45%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 60%">60%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 75%">75%</div>
</div>

6. Custom Height Progress Bars

<div class="progress" style="height: 4px;">
  <div class="progress-bar" role="progressbar" style="width: 45%"></div>
</div>
<div class="progress mt-3" style="height: 8px;">
  <div class="progress-bar bg-success" role="progressbar" style="width: 60%"></div>
</div>
<div class="progress mt-3" style="height: 30px;">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 50%">50%</div>
</div>

7. Multiple Bars (Stacked Progress)

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%">15%</div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%">30%</div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%">20%</div>
</div>

<div class="progress mt-3">
  <div class="progress-bar bg-success" style="width: 45%">Completed (45%)</div>
  <div class="progress-bar bg-warning" style="width: 25%">In Progress (25%)</div>
  <div class="progress-bar bg-secondary" style="width: 30%">Pending (30%)</div>
</div>

8. Dynamic Progress Bar with JavaScript

Simple Dynamic Progress Bar
<div class="card">
  <div class="card-header bg-primary text-white">
    <h4 class="mb-0">Dynamic Progress Bar</h4>
  </div>
  <div class="card-body">
    <label class="form-label">Progress: <span id="progressValue">0</span>%</label>
    <div class="progress">
      <div id="dynamicProgress" class="progress-bar progress-bar-striped progress-bar-animated"
           role="progressbar" style="width: 0%" aria-valuenow="0">0%</div>
    </div>
    <div class="mt-3">
      <button id="incrementBtn" class="btn btn-primary">Increase +10%</button>
      <button id="decrementBtn" class="btn btn-warning">Decrease -10%</button>
      <button id="resetBtn" class="btn btn-danger">Reset</button>
      <button id="completeBtn" class="btn btn-success">Complete (100%)</button>
    </div>
  </div>
</div>

<script>
const progressBar = document.getElementById('dynamicProgress');
const progressValue = document.getElementById('progressValue');
function updateProgress(value) {
  const newValue = Math.min(100, Math.max(0, value));
  progressBar.style.width = newValue + '%';
  progressBar.setAttribute('aria-valuenow', newValue);
  progressBar.textContent = newValue + '%';
  progressValue.textContent = newValue;
}
document.getElementById('incrementBtn').addEventListener('click', () => updateProgress((+progressBar.getAttribute('aria-valuenow') || 0) + 10));
document.getElementById('decrementBtn').addEventListener('click', () => updateProgress((+progressBar.getAttribute('aria-valuenow') || 0) - 10));
document.getElementById('resetBtn').addEventListener('click', () => updateProgress(0));
document.getElementById('completeBtn').addEventListener('click', () => updateProgress(100));
</script>
File Upload Progress Simulation
<div class="card">
  <div class="card-header bg-success text-white"><h4 class="mb-0"><i class="bi bi-cloud-upload"></i> File Upload Simulator</h4></div>
  <div class="card-body">
    <input type="file" class="form-control mb-3" id="fileInput">
    <div id="uploadArea" style="display: none;">
      <div class="d-flex justify-content-between mb-2"><span id="fileName"></span><span id="fileSize"></span></div>
      <div class="progress mb-2" style="height: 30px;">
        <div id="uploadProgress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%">0%</div>
      </div>
      <button id="startUploadBtn" class="btn btn-primary btn-sm">Start Upload</button>
      <button id="cancelUploadBtn" class="btn btn-danger btn-sm">Cancel</button>
      <div id="uploadStatus" class="text-muted mt-2">Ready to upload</div>
    </div>
  </div>
</div>

<script>
let uploadInterval;
let currentProgress = 0;
document.getElementById('fileInput').addEventListener('change', function (e) {
  const file = e.target.files[0];
  if (!file) return;
  document.getElementById('fileName').textContent = 'File: ' + file.name;
  document.getElementById('fileSize').textContent = 'Size: ' + (file.size / 1024).toFixed(2) + ' KB';
  document.getElementById('uploadArea').style.display = 'block';
});
</script>

9. Progress Bar with Live Timer/Countdown

<div class="card text-center">
  <div class="card-header bg-info text-white"><h4 class="mb-0">Countdown Timer</h4></div>
  <div class="card-body">
    <input type="number" id="timerSeconds" class="form-control text-center mb-3" value="30" min="1" max="300">
    <div class="progress mb-3" style="height: 30px;">
      <div id="timerProgress" class="progress-bar progress-bar-striped" role="progressbar" style="width: 100%">100%</div>
    </div>
    <h2 id="timeDisplay" class="display-4 mb-3">00:30</h2>
    <button id="startTimerBtn" class="btn btn-success">Start Timer</button>
    <button id="pauseTimerBtn" class="btn btn-warning">Pause</button>
    <button id="resetTimerBtn" class="btn btn-danger">Reset</button>
  </div>
</div>

10. Real-World Progress Bar Examples

Survey Completion Progress
<div class="card">
  <div class="card-header bg-primary text-white"><h4 class="mb-0">Customer Satisfaction Survey</h4></div>
  <div class="card-body">
    <div class="d-flex justify-content-between mb-2"><span>Survey Progress</span><span id="surveyPercent">0%</span></div>
    <div class="progress mb-4" style="height: 25px;">
      <div id="surveyProgress" class="progress-bar progress-bar-striped" style="width: 0%">0%</div>
    </div>
    <!-- questions and radio inputs here -->
    <button id="submitSurvey" class="btn btn-primary" disabled>Submit Survey</button>
  </div>
</div>
Skill Level Indicators
<div class="card">
  <div class="card-header bg-dark text-white"><h5 class="mb-0">Developer Skills</h5></div>
  <div class="card-body">
    <div class="mb-3">
      <div class="d-flex justify-content-between mb-1"><span>HTML/CSS</span><span>90%</span></div>
      <div class="progress"><div class="progress-bar bg-danger" style="width: 90%">90%</div></div>
    </div>
    <div class="mb-3">
      <div class="d-flex justify-content-between mb-1"><span>JavaScript</span><span>75%</span></div>
      <div class="progress"><div class="progress-bar bg-warning" style="width: 75%">75%</div></div>
    </div>
  </div>
</div>

11. Progress Bar with Tooltip

<div class="progress" style="height: 30px;">
  <div id="tooltipProgress" class="progress-bar bg-success"
       role="progressbar" style="width: 65%"
       data-bs-toggle="tooltip" data-bs-placement="top"
       title="65% Complete">65%</div>
</div>

<script>
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl);
});
</script>

12. Progress Bar with Status Messages

<div class="card">
  <div class="card-header bg-primary text-white"><h4 class="mb-0"><i class="bi bi-arrow-repeat"></i> Processing Pipeline</h4></div>
  <div class="card-body">
    <div class="progress mb-3" style="height: 35px;">
      <div id="statusProgress" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 0%">0%</div>
    </div>
    <div id="statusMessages" class="mt-3"><div class="alert alert-secondary">Waiting to start...</div></div>
    <button id="startProcessBtn" class="btn btn-primary">Start Process</button>
    <button id="resetProcessBtn" class="btn btn-secondary">Reset</button>
  </div>
</div>

Quick Reference Table

Class / AttributePurpose
.progressContainer for progress bar
.progress-barThe actual progress bar element
.progress-bar-stripedAdds stripes to the bar
.progress-bar-animatedAnimates the stripes
.bg-primary, .bg-success, etc.Contextual colors
role="progressbar"ARIA role for accessibility
aria-valuenowCurrent progress value
aria-valueminMinimum value (0)
aria-valuemaxMaximum value (100)
style="width: X%"Sets the progress width

Complete Demo HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Progress Bars - Complete Tutorial</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
</head>
<body class="container py-5">
  <h1 class="mb-4"><i class="bi bi-bar-chart-steps"></i> Bootstrap 5 Progress Bars</h1>
  <div class="progress mb-3"><div class="progress-bar" style="width: 25%">25%</div></div>
  <div class="progress mb-3"><div class="progress-bar bg-success" style="width: 60%">60%</div></div>
  <div class="progress mb-3"><div class="progress-bar progress-bar-striped" style="width: 45%">Striped</div></div>
  <div class="progress">
    <div class="progress-bar bg-success" style="width: 45%">Completed</div>
    <div class="progress-bar bg-warning" style="width: 25%">In Progress</div>
    <div class="progress-bar bg-secondary" style="width: 30%">Pending</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Previous: Advanced Forms Next: Bootstrap Flex