Bootstrap 5 Progress Bars

Bootstrap 5 Progress Bars Guide

Bootstrap 5 provides a progress bar component that visually represents progress, loading, or completion states. It is customizable with colors, animations, labels, and different sizes.

---

1. Basic Progress Bar

Use the .progress class for the container and .progress-bar for the bar inside.

<div class="progress">
    <div class="progress-bar" style="width: 50%"></div>
</div>

Explanation:

• .progress → Creates the progress bar container.
• .progress-bar → Represents the progress itself.
• style="width: 50%" → Sets the progress to 50%.

---

2. Progress Bar with Label

You can display a percentage inside the bar.

<div class="progress">
    <div class="progress-bar" style="width: 70%">70%</div>
</div>

---

3. Colored Progress Bars

Use Bootstrap’s color classes (bg-*) to change the bar color.

<div class="progress">
    <div class="progress-bar bg-success" style="width: 60%">Success</div>
</div>
<div class="progress mt-2">
    <div class="progress-bar bg-info" style="width: 40%">Info</div>
</div>
<div class="progress mt-2">
    <div class="progress-bar bg-warning" style="width: 80%">Warning</div>
</div>
<div class="progress mt-2">
    <div class="progress-bar bg-danger" style="width: 50%">Danger</div>
</div>

Available Colors:

• bg-primary (Blue)
• bg-secondary (Gray)
• bg-success (Green)
• bg-danger (Red)
• bg-warning (Yellow)
• bg-info (Light Blue)
• bg-dark (Black)

---

4. Striped Progress Bar

Use .progress-bar-striped for a striped effect.

<div class="progress">
    <div class="progress-bar progress-bar-striped bg-info" style="width: 75%">Striped</div>
</div>

---

5. Animated Progress Bar

Add .progress-bar-animated to make the stripes move continuously.

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" style="width: 50%">Loading...</div>
</div>

---

6. Multiple Progress Bars in One

You can stack multiple progress bars inside the same .progress container.

<div class="progress">
    <div class="progress-bar bg-success" style="width: 40%">40%</div>
    <div class="progress-bar bg-warning" style="width: 30%">30%</div>
    <div class="progress-bar bg-danger" style="width: 30%">30%</div>
</div>

---

7. Different Heights for Progress Bars

Use style="height: Xpx;" to adjust the height of the bar.

<div class="progress" style="height: 10px;">
    <div class="progress-bar bg-success" style="width: 70%"></div>
</div>

<div class="progress mt-2" style="height: 25px;">
    <div class="progress-bar bg-info" style="width: 50%">Larger Bar</div>
</div>

---

8. Progress Bar with Dynamic Update (JavaScript Example)

You can update the progress dynamically using JavaScript.

<button class="btn btn-primary" onclick="increaseProgress()">Increase Progress</button>
<div class="progress mt-2">
    <div id="dynamicProgress" class="progress-bar bg-success" style="width: 0%">0%</div>
</div>

<script>
    function increaseProgress() {
        let progressBar = document.getElementById("dynamicProgress");
        let currentWidth = parseInt(progressBar.style.width);
        if (currentWidth < 100) {
            let newWidth = currentWidth + 10;
            progressBar.style.width = newWidth + "%";
            progressBar.innerText = newWidth + "%";
        }
    }
</script>

How It Works:

• Clicking the button increases progress by 10%.
• The width of #dynamicProgress updates dynamically.

---

Conclusion

✔ Bootstrap 5 progress bars are useful for loading indicators, file uploads, and task completion tracking.
✔ Customization options include colors, animation, striped effects, labels, and JavaScript updates.
✔ Easy to integrate into any web project.

Need more examples? Let me know!

Share on Google Plus

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.