Stylize progress element with a few extra classes and some crafty browser-specific css.
A basic progress in all different colors.
Source Code
<div class="progress mg-b-20">
<div class="progress-bar bg-success wd-35p" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>Class Reference
| Class | Value |
|---|---|
class="progress-bar bg-[value]" |
primary | success | warning | danger | info | teal | indigo | purple | orange | pink |
A striped progress in all different colors.
Source Code
<div class="progress mg-b-20">
<div class="progress-bar progress-bar-striped wd-35p"
role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>A basic progress in different sizes.
Size Super Extra SmallSource Code
<div class="progress mg-b-20 ht-10">
<div class="progress-bar wd-35p"
role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>Class Reference
| Class | Value |
|---|---|
class="progress-bar ht-2" |
A super extra small size of progress using the .ht-2 class. |
A basic progress with labels centered.
Source Code
<div class="progress mg-b-20">
<div class="progress-bar wd-35p"
role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">35%</div>
</div>