1<div class="progress">
2 <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
3</div>
1<div class="progress">
2 <div class="progress-bar progress-bar-striped bg-success w-25"> 25% </div>
3</div>
1<div class="progress">
2 <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
3</div>
4<div class="progress">
5 <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
6</div>
7<div class="progress">
8 <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
9</div>
10<div class="progress">
11 <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
12</div>
13<div class="progress">
14 <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
15</div>
1<!-- Bootstrap 5 Progress Bar -->
2<div class="progress">
3 <div
4 class="progress-bar w-75"
5 role="progressbar"
6 aria-valuenow="75"
7 aria-valuemin="0"
8 aria-valuemax="100"
9 ></div>
10</div>
11
12<!-- Labels -->
13<div class="progress">
14 <div
15 class="progress-bar"
16 role="progressbar"
17 style="width: 25%"
18 aria-valuenow="25"
19 aria-valuemin="0"
20 aria-valuemax="100"
21 >
22 25%
23 </div>
24</div>
25
26<!-- Height -->
27<div class="progress" style="height: 1px">
28 <div
29 class="progress-bar"
30 role="progressbar"
31 style="width: 25%"
32 aria-valuenow="25"
33 aria-valuemin="0"
34 aria-valuemax="100"
35 ></div>
36</div>
37<div class="progress" style="height: 20px">
38 <div
39 class="progress-bar"
40 role="progressbar"
41 style="width: 25%"
42 aria-valuenow="25"
43 aria-valuemin="0"
44 aria-valuemax="100"
45 ></div>
46</div>
47
48<!-- Backgrounds -->
49<div class="progress">
50 <div
51 class="progress-bar bg-info"
52 role="progressbar"
53 style="width: 50%"
54 aria-valuenow="50"
55 aria-valuemin="0"
56 aria-valuemax="100"
57 ></div>
58</div>
59
60<!-- Multiple bars -->
61<div class="progress">
62 <div
63 class="progress-bar"
64 role="progressbar"
65 style="width: 15%"
66 aria-valuenow="15"
67 aria-valuemin="0"
68 aria-valuemax="100"
69 ></div>
70 <div
71 class="progress-bar bg-success"
72 role="progressbar"
73 style="width: 30%"
74 aria-valuenow="30"
75 aria-valuemin="0"
76 aria-valuemax="100"
77 ></div>
78 <div
79 class="progress-bar bg-info"
80 role="progressbar"
81 style="width: 20%"
82 aria-valuenow="20"
83 aria-valuemin="0"
84 aria-valuemax="100"
85 ></div>
86</div>
87
88<!-- Striped -->
89<div class="progress">
90 <div
91 class="progress-bar progress-bar-striped bg-info"
92 role="progressbar"
93 style="width: 50%"
94 aria-valuenow="50"
95 aria-valuemin="0"
96 aria-valuemax="100"
97 ></div>
98</div>
99
100<!-- Animated stripes -->
101<div class="progress">
102 <div
103 class="progress-bar progress-bar-striped progress-bar-animated"
104 role="progressbar"
105 aria-valuenow="75"
106 aria-valuemin="0"
107 aria-valuemax="100"
108 style="width: 75%"
109 ></div>
110</div>
1<!-- Basic Bootstrap Progress Bar -->
2<div class="progress">
3 <div class="progress-bar" role="progressbar" aria-valuenow="70"
4 aria-valuemin="0" aria-valuemax="100" style="width:70%">
5 <span class="sr-only">70% Complete</span>
6 </div>
7</div>
8
9<!-- W3.CSS-->
10<div class="w3-border">
11 <div class="w3-grey" style="height:24px;width:20%"></div>
12</div>
13
14<!-- Foundation 5.2 (Yep) -->
15<div class="progress [small-# large-#] [radius round]">
16 <span class="meter [secondary alert success]" style="width: [1 - 100]%"></span>
17</div>
18
19<!-- Foundation 6.2 (Yep Yep)-->
20<div class="progress" role="progressbar" tabindex="0" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100">
21 <div class="progress-meter" style="width: 50%"></div>
22</div>
1<div class="progress">
2 <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
3</div>