Prev Next

BS5 Progress Bars

Bootstrap 5 Progress Bars provide an easy way to visualize progress or status with sleek, customizable bars.

Key Topics

Basic Progress Bar

A basic progress bar is created using the .progress class and an inner .progress-bar element.

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

Explanation: The style="width: 50%" controls the progress, while the aria-* attributes ensure accessibility.

Striped Progress Bar

Add the .progress-bar-striped class to make the progress bar striped.

<div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 75%;">75%</div>
</div>

Explanation: The stripes visually indicate progression, often used for processes in progress.

Animated Progress Bar

Add the .progress-bar-animated class to animate the striped progress bar.

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 60%;">60%</div>
</div>

Explanation: The animation provides a dynamic look, indicating an ongoing process.

Complete Progress Bar Example

Below is a full HTML page demonstrating various progress bar styles.

<!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 Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap Progress Bars</h2>

        <h3>Basic Progress Bar</h3>
        <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 50%;">50%</div>
        </div>

        <h3>Striped Progress Bar</h3>
        <div class="progress">
            <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 75%;">75%</div>
        </div>

        <h3>Animated Progress Bar</h3>
        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 60%;">60%</div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example combines basic, striped, and animated progress bars in a responsive layout.

Key Takeaways

  • Progress bars are styled using the .progress and .progress-bar classes.
  • Striped and animated effects enhance the user interface for ongoing tasks.
  • Use inline styles to set the width dynamically.
Prev Next