Progress Bar

Search…
Progress Bar
Basic Progress bar
Example 1
Source Code
1
<!-- Progress -->
2
<div class="progress mb-2">
3
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
4
</div>
5
<div class="progress mb-2">
6
    <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
7
</div>
8
<div class="progress mb-2">
9
    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
10
</div>
11
<div class="progress mb-2">
12
    <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
13
</div>
14
<div class="progress">
15
    <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
16
</div>
17
<!-- /progress -->
Copied!
Progress bar with Labels
Example 2
Source Code
1
<!-- Progress -->
2
<div class="progress mb-2">
3
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
4
</div>
5
<div class="progress mb-2">
6
    <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%
7
    </div>
8
</div>
9
<div class="progress mb-2">
10
    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%
11
    </div>
12
</div>
13
<div class="progress mb-2">
14
    <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%
15
    </div>
16
</div>
17
<div class="progress">
18
    <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%
19
    </div>
20
</div>
21
<!-- /progress -->
Copied!
Progress bar with Heights
Example 3
Source Code
1
<!-- Progress -->
2
<div class="progress mb-2" style="height: 2px;">
3
    <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
4
</div>
5
<div class="progress mb-2" style="height: 3px;">
6
    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
7
</div>
8
<div class="progress mb-2" style="height: 5px;">
9
    <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
10
</div>
11
<div class="progress mb-2" style="height: 8px;">
12
    <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
13
</div>
14
<div class="progress" style="height: 12px;">
15
    <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
16
</div>
17
<!-- /progress -->
Copied!
Multiple Progress bar
Example 4
Source Code
1
<!-- Progress -->
2
<div class="progress">
3
    <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
4
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
5
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
6
</div>
7
<!-- /progress -->
Copied!
Various color Progress bar
Example 5
Source Code
1
<!-- Progress -->
2
<div class="progress mb-2">
3
    <div class="progress-bar bg-priamry" role="progressbar" style="width: 20%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
4
</div>
5
<div class="progress mb-2">
6
    <div class="progress-bar bg-secondary" role="progressbar" style="width: 40%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
7
</div>
8
<div class="progress mb-2">
9
    <div class="progress-bar bg-info" role="progressbar" style="width: 60%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
10
</div>
11
<div class="progress mb-2">
12
    <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
13
</div>
14
<div class="progress mb-2">
15
    <div class="progress-bar bg-danger" role="progressbar" style="width: 85%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
16
</div>
17
<div class="progress">
18
    <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
19
</div>
20
<!-- /progress -->
Copied!
Striped Progress bar
Example 6
Source Code
1
<!-- Progress -->
2
<div class="progress mb-2">
3
    <div class="progress-bar progress-bar-striped bg-priamry" role="progressbar" style="width: 20%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
4
</div>
5
<div class="progress mb-2">
6
    <div class="progress-bar progress-bar-striped bg-secondary" role="progressbar" style="width: 40%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
7
</div>
8
<div class="progress mb-2">
9
    <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
10
</div>
11
<div class="progress mb-2">
12
    <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
13
</div>
14
<div class="progress mb-2">
15
    <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 85%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
16
</div>
17
<div class="progress">
18
    <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
19
</div>
20
<!-- /progress -->
Copied!
Animated Striped Progress bar
Example 7
Source Code
1
<!-- Progress -->
2
<div class="progress mb-2">
3
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-priamry" role="progressbar" style="width: 20%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
4
</div>
5
<div class="progress mb-2">
6
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-secondary" role="progressbar" style="width: 40%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
7
</div>
8
<div class="progress mb-2">
9
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 60%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
10
</div>
11
<div class="progress mb-2">
12
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
13
</div>
14
<div class="progress mb-2">
15
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 85%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
16
</div>
17
<div class="progress">
18
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
19
</div>
20
<!-- /progress -->
Copied!
Components - Previous
Pagination
Next - Components
Scrollspy
Last modified 1yr ago
Copy link
Contents
Basic Progress bar
Progress bar with Labels
Progress bar with Heights
Multiple Progress bar
Various color Progress bar
Striped Progress bar
Animated Striped Progress bar