0
0
Bootsrapmarkup~5 mins

Progress bars in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Progress bars show how much of a task is done. They help people see progress easily.

Showing file upload or download progress.
Displaying how much of a form is completed.
Tracking progress in a quiz or survey.
Visualizing loading or processing time.
Indicating progress in a project or goal.
Syntax
Bootsrap
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Use role="progressbar" and aria-* attributes for accessibility.
The style="width: X%;" controls how much the bar fills.
Examples
A progress bar filled to 25%.
Bootsrap
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
A green progress bar filled to 75% using the bg-success color.
Bootsrap
<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
A striped and animated progress bar filled to 60%.
Bootsrap
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Sample Program

This example shows three progress bars with different styles and progress levels. Each bar uses Bootstrap classes for color, stripes, and animation. The text inside the bar shows the percentage done. The aria-label on sections helps screen readers understand the purpose.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Progress Bars Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-5">
    <h1>Progress Bars Demo</h1>
    <section aria-label="File upload progress">
      <p>File upload progress:</p>
      <div class="progress" style="height: 1.5rem;">
        <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
      </div>
    </section>
    <section aria-label="Form completion progress" class="mt-4">
      <p>Form completion:</p>
      <div class="progress" style="height: 1.5rem;">
        <div class="progress-bar bg-success" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
      </div>
    </section>
    <section aria-label="Loading progress" class="mt-4">
      <p>Loading progress:</p>
      <div class="progress" style="height: 1.5rem;">
        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 55%;" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">55%</div>
      </div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always include aria-valuenow, aria-valuemin, and aria-valuemax for accessibility.

Use progress-bar-striped and progress-bar-animated classes to add visual interest.

Adjust the width style to change the progress amount.

Summary

Progress bars visually show how much of a task is done.

Bootstrap makes it easy to create styled and accessible progress bars.

Use colors, stripes, and animation to make progress bars clearer and nicer.