Progress bars in Bootsrap

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>

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.

Practice

1. What is the main purpose of a progress bar in Bootstrap?

easy

A. To create clickable buttons

B. To add navigation links

C. To display images in a slideshow

D. To visually show how much of a task is completed

Solution

1. Step 1: Understand the role of progress bars

   Progress bars are used to show progress visually, like filling a bar as a task advances.

2. Step 2: Match the purpose with options

   Only To visually show how much of a task is completed describes showing task completion visually, which is the purpose of progress bars.

3. Final Answer:

   To visually show how much of a task is completed -> Option D

4. Quick Check:

   Progress bar = Visual task progress [OK]

Hint: Progress bars show task completion visually [OK]

Common Mistakes:

• Confusing progress bars with buttons or links
• Thinking progress bars display images
• Mixing progress bars with navigation elements

2. Which of the following is the correct Bootstrap class to create a basic progress bar container?

easy

A. <div class='progress'></div>

B. <div class='progress-bar'></div>

C. <div class='bar-progress'></div>

D. <div class='progress-container'></div>

Solution

1. Step 1: Identify the container class for progress bars in Bootstrap

   The container that holds the progress bar is progress, not progress-bar which is the inner bar.

2. Step 2: Check each option

   <div class='progress'></div> uses progress which is correct. The other options use incorrect or non-existent classes.

3. Final Answer:

   <div class='progress'></div> -> Option A

4. Quick Check:

   Container class = progress [OK]

Hint: Container uses class 'progress', inner bar uses 'progress-bar' [OK]

Common Mistakes:

• Using 'progress-bar' as container instead of inner bar
• Inventing class names like 'bar-progress'
• Confusing container and inner bar classes

3. What will be the visual result of this code?

<div class='progress'>
  <div class='progress-bar bg-success' role='progressbar' style='width: 75%;'>75%</div>
</div>

medium

A. A green progress bar filled to 100% with no text

B. A green progress bar filled to 75% with text '75%' inside

C. A red progress bar filled to 75% with text '75%' inside

D. No progress bar will show because of missing classes

Solution

1. Step 1: Analyze the classes and styles

   The inner div has class progress-bar and bg-success which makes it green. The style sets width to 75%.

2. Step 2: Understand the visual output

   The bar will fill 75% of the container width in green color and show the text '75%'.

3. Final Answer:

   A green progress bar filled to 75% with text '75%' inside -> Option B

4. Quick Check:

   bg-success + width 75% = green bar 75% filled [OK]

Hint: bg-success means green, style width controls fill [OK]

Common Mistakes:

• Confusing bg-success with red color
• Ignoring the style width property
• Expecting 100% fill without style

4. Identify the error in this Bootstrap progress bar code:

<div class='progress'>
  <div class='progress-bar' role='progressbar' style='width: 50%;>50%</div>
</div>

medium

A. Missing closing quote in style attribute

B. Incorrect class name 'progress-bar'

C. Missing role attribute

D. Progress bar width cannot be 50%

Solution

1. Step 1: Check the style attribute syntax

   The style attribute is style='width: 50%;> which misses the closing single quote before the closing angle bracket.

2. Step 2: Verify other attributes

   Class progress-bar and role attribute are correct. Width 50% is valid.

3. Final Answer:

   Missing closing quote in style attribute -> Option A

4. Quick Check:

   Style attribute quotes must close properly [OK]

Hint: Check quotes around style attribute carefully [OK]

Common Mistakes:

• Ignoring missing quote causing HTML error
• Thinking class 'progress-bar' is wrong
• Assuming role attribute is optional but not error

5. You want to create a striped and animated progress bar at 40% width with a blue color using Bootstrap. Which code snippet is correct?

hard

A. <div class='progress-bar progress bg-primary striped animated' role='progressbar' style='width: 40%;'>40%</div>

B. <div class='progress'><div class='progress-bar bg-info striped animated' role='progressbar' style='width: 40%;'>40%</div></div>

C. <div class='progress'><div class='progress-bar bg-primary progress-bar-striped progress-bar-animated' role='progressbar' style='width: 40%;'>40%</div></div>

D. <div class='progress'><div class='progress-bar bg-primary progress-striped progress-animated' role='progressbar' style='width: 40%;'>40%</div></div>

Solution

1. Step 1: Identify correct Bootstrap classes for striped and animated bars

   The correct classes are progress-bar-striped and progress-bar-animated. The color class for blue is bg-primary.

2. Step 2: Check each option's class usage and structure

   <div class='progress'><div class='progress-bar bg-primary progress-bar-striped progress-bar-animated' role='progressbar' style='width: 40%;'>40%</div></div> uses all correct classes and structure inside a progress container. The other options use incorrect or missing class names or wrong container structure.

3. Final Answer:

   <div class='progress'><div class='progress-bar bg-primary progress-bar-striped progress-bar-animated' role='progressbar' style='width: 40%;'>40%</div></div> -> Option C

4. Quick Check:

   Striped + animated classes = progress-bar-striped + progress-bar-animated [OK]

Hint: Use 'progress-bar-striped' and 'progress-bar-animated' for effects [OK]

Common Mistakes:

• Using incorrect class names like 'striped' or 'progress-striped'
• Missing the container div with class 'progress'
• Placing classes on wrong elements