Open In App

Bootstrap 5 Progress Background

Improve
Improve
Like Article
Like
Save
Share
Report

The Bootstrap 5 Progress is used to show the progress of a task to the user. A progress bar displays how much your process progressed or is completed and left. We can use background utility classes to change the appearance of progress bars.

Prerequisite: Bootstrap 5 Progress component to create, stack, animate progress bars and place text labels over them.

Bootstrap 5 Progress Backgrounds Class: There is no individual color for this, we can use Bootstrap 5 Background Color classes to color the progress bars.

Syntax:

<div class="progress">
    <div 
        class="progress-bar bg-warning" 
        role="progressbar" 
        style="width: x%" 
        aria-valuenow="..."
        aria-valuemin="..." 
        aria-valuemax="...">
    </div>
</div>

Example 1: In this example, we set different informative background colors for the progress components.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <link href=
          rel="stylesheet">
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
    <div class="container">
        <div class="text-center">
            <h1 class="text-success">GeeksforGeeks</h1>
            <h3> Bootstrap 5 progress background</h3>
        </div>
 
        <div>
 
            <div class="progress mb-3 mt-4">
                <div class="progress-bar bg-primary" role="progressbar"
                     style="width:25%" aria-valuenow="30"
                     aria-valuemin="0" aria-valuemax="100">
                </div>
            </div>
            <div class="progress mb-3 mt-4">
                <div class="progress-bar bg-secondary" role="progressbar"
                     style="width: 35%" aria-valuenow="30"
                     aria-valuemin="0" aria-valuemax="100">
                </div>
            </div>
            <div class="progress mb-3">
                <div class="progress-bar bg-success" role="progressbar"
                     style="width: 45%" aria-valuenow="45"
                     aria-valuemin="0" aria-valuemax="100">
                </div>
            </div>
            <div class="progress mb-3 mt-4">
                <div class="progress-bar bg-warning" role="progressbar"
                     style="width:55%" aria-valuenow="30"
                     aria-valuemin="0" aria-valuemax="100">
                </div>
            </div>
            <div class="progress mb-3">
                <div class="progress-bar bg-info" role="progressbar"
                     style="width: 65%" aria-valuenow="60"
                     aria-valuemin="0" aria-valuemax="100">
                </div>
            </div>
            <div class="progress mb-3">
                <div class="progress-bar bg-danger" role="progressbar"
                     style="width: 90%" aria-valuenow="90"
                     aria-valuemin="0" aria-valuemax="100">
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Bootstrap 5 progress background

Example 2: In this example, we set the progress bars with light, dark, transparent, and white colors.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <link href=
          rel="stylesheet">
    <script src=
    </script>
    <script src=
    </script>
 
 
</head>
 
<body>
    <div class="container">
        <div class="text-center">
            <h1 class="text-success">GeeksforGeeks</h1>
            <h3>Bootstrap 5 Progress Backgrounds</h3>
        </div>
        <div class="progress mb-3 mt-4">
            <div class="progress-bar bg-light" role="progressbar"
                 style="width: 30%" aria-valuenow="30" aria-valuemin="0"
                 aria-valuemax="100">
            </div>
        </div>
        <div class="progress mb-3 mt-4">
            <div class="progress-bar bg-dark" role="progressbar"
                 style="width: 40%" aria-valuenow="40" aria-valuemin="0"
                 aria-valuemax="100">
            </div>
        </div>
        <div class="progress mb-3">
            <div class="progress-bar bg-white" role="progressbar"
                 style="width: 50%" aria-valuenow="50" aria-valuemin="0"
                 aria-valuemax="100">
            </div>
        </div>
        <div class="progress mb-3">
            <div class="progress-bar bg-transparent" role="progressbar"
                 style="width: 60%" aria-valuenow="60" aria-valuemin="0"
                 aria-valuemax="100">
            </div>
        </div>
        <div class="progress mb-3">
            <div class="progress-bar bg-body" role="progressbar"
                 style="width: 90%" aria-valuenow="100" aria-valuemin="0"
                 aria-valuemax="100">
            </div>
        </div>
    </div>
</body>
 
</html>


Output:

Bootstrap 5 Progress Background

Reference: https://getbootstrap.com/docs/5.0/components/progress/#backgrounds



Last Updated : 12 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads