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-2class. |
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>