Bootstrap Progress Bar

:dart: Learning Objectives

By the end of this lesson, you'll be able to:

• Create progress bars using Bootstrap components
• Customize progress bar appearance (color, height, labels)
• Add visual effects like stripes and animations
• Implement accessibility features with ARIA attributes

:information_source: What is a Bootstrap Progress Bar? A Bootstrap progress bar is a component that shows users how far they've progressed through a task or process. Think of it like a loading bar in a video game or a download progress indicator!

Here's what a default progress bar looks like:

A default progress bar

You can create this progress bar by copying code from the Bootstrap Cheat Sheet > Progress section. Check out the Bootstrap Cheat Sheet for quick reference!

Sample codes copied from Bootstrap Cheat Sheet to make a basic progress bar

Let's explore how to build and customize progress bars step by step!

:emoji: Progress Component Structure

A progress component needs these building blocks:

• <div> elements - The containers for your progress bar
• Width styling - Controls how much of the bar is filled (using inline CSS or Bootstrap classes)
• Height styling - Makes the bar taller or shorter (using inline CSS)
• ARIA attributes - Helps screen readers understand the progress bar

To create a basic progress bar:

1. Add .progress class to a parent <div>
2. Add .progress-bar class to a child <div>

Here's how it works:

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

:bulb: Tip The style="width: 70%;" is crucial! It tells the progress bar how much to fill. Without it, you'll see an empty progress container.

What happens without width?

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  </div>
</div>

Result: An empty progress container with no visible bar!

:emoji: ARIA Attributes for Accessibility

ARIA (Accessible Rich Internet Applications) attributes help people using screen readers understand your progress bars. These attributes make your website more inclusive!

:information_source: Why ARIA matters: ARIA attributes help assistive technologies (like screen readers) understand and announce progress bars to users with visual impairments.

Here are the four key ARIA attributes for progress bars:

These attributes work together in the child <div>:

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

:emoji: Setting Progress Bar Width

You have two ways to set how much of the progress bar is filled:

1. Inline CSS - style="width: 50%;"
2. Bootstrap width utility classes - w-50

:memo: Note Always include ARIA attributes even when using width utility classes. This keeps your progress bars accessible!

Let's see the width utility class in action:

Example:

HTML Input:

<div class="progress">
  <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    50%
  </div>
</div>

Output:

[████████████████████████████████████████████████████                                                    ]
50%

A progress bar that is 50% complete

Key points about this example:

• w-50 sets the progress bar to 50% width
• You can use any value from 0 to 100 (like w-25, w-75, w-100)
• Important: The aria-valuenow="50" must match the width value!

:bulb: Tip Keep your values consistent! If you use w-75, make sure aria-valuenow="75" too. This helps screen readers announce the correct progress.

:emoji: Adjusting Progress Bar Height

Want a taller or shorter progress bar? You can customize the height using inline CSS on the parent <div> element.

Here's how to make a taller progress bar:

Example:

HTML Input:

<div class="progress" style="height: 30px;">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    75%
  </div>
</div>

Output:

[████████████████████████████████████████████████████████████████████████████                           ]
75%

A taller progress bar that is 75% complete

:memo: Note Notice the height styling goes on the parent element (<div class="progress">), not the child. The progress bar automatically adjusts to fill the new height!

:art: Adding Colors to Progress Bars

Bootstrap provides background utility classes to style your progress bars with different colors. Add these classes to the child <div> element.

Example:

HTML Input:

<div class="progress">
  <div class="progress-bar bg-success w-60" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    60%
  </div>
</div>

Output:

[████████████████████████████████████████████████████████████████████                                   ]
60%

A green progress bar that is 60% complete

:emoji:️ Adding Labels to Progress Bars

Make your progress bars more informative by adding text labels! Simply place text between the opening and closing tags of the progress bar <div>.

Example:

HTML Input:

<div class="progress">
  <div class="progress-bar bg-info w-80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    80% Complete
  </div>
</div>

Output:

[████████████████████████████████████████████████████████████████████████████████████████                ]
80% Complete

A blue progress bar showing "80% Complete" label

:bulb: Tip Keep your label consistent with the actual progress! If the bar shows 80%, your label should say "80%" or "80% Complete".

:emoji: Creating Striped Progress Bars

Want to make your progress bars stand out? Add diagonal stripes using the .progress-bar-striped class on the child <div> element!

Example:

HTML Input:

<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning w-70" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
    70%
  </div>
</div>

Output:

[▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓                               ]
70%

A yellow striped progress bar that is 70% complete

:emoji: Animating Striped Progress Bars

Take your progress bars to the next level with animation! The .progress-bar-animated class makes the stripes move from right to left.

:memo: Note Requirements for animation:

1. You must include .progress-bar-striped first
2. Then add .progress-bar-animated
3. Not all browsers support this animation

Let's create an animated striped progress bar:

Example:

HTML Input:

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    25%
  </div>
</div>

Output:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Progress Bar Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="progress mt-3">
      <!-- Progress bar with striped and animated effect, 25% complete, green background -->
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-success w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        25%
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Try this code in CodePen to see the animated striped effect in action

:books: Summary

You've learned how to create and customize Bootstrap progress bars! Here's what you can do now:

:white_check_mark: Create basic progress bars with .progress and .progress-bar classes :white_check_mark: Set progress values using width (inline CSS or utility classes) :white_check_mark: Make them accessible with ARIA attributes :white_check_mark: Customize appearance with colors, heights, and labels :white_check_mark: Add visual effects like stripes and animations

Remember: Always match your visual progress with ARIA values for accessibility!

:movie_camera: Video Tutorials

Bootstrap Progress Bar (Part 1) Video Tutorial

Bootstrap Progress Bar (Part 2) Video Tutorial

:emoji: AI Prompt

Code with AI: Create interactive progress components.

Prompts:

• "Bootstrap code for a progress bar that is 75% complete with a green background."
• "Bootstrap code for a striped animated progress bar with custom height."

:bulb: Practice Time!

Try creating these progress bars on your own:

1. A red progress bar at 25% with the label "Warning: Low Battery"
2. A striped blue progress bar at 90% with 40px height
3. An animated green progress bar showing "Download: 60% Complete"

Test your progress bars with a screen reader to ensure they're accessible!