Dashboard
Cards & Widgets
Charts
Forms
UI Elements
Tables
Maps
Mailbox
Pages

Progress

Stylize progress element with a few extra classes and some crafty browser-specific css.

Basic Progress

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>
Striped Progress

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>
Progress Sizes

A basic progress in different sizes.

Size Super Extra Small
Size Extra Small
Size Small
Size Normal
Size Large

Source Code

<div class="progress mg-b-20">  <div class="progress-bar progress-bar-lg wd-35p"  role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div></div>
Progress Labels

A basic progress with labels centered.

50%
60%
95%

Source Code

<div class="progress mg-b-20">  <div class="progress-bar progress-bar-lg wd-35p"  role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">35%</div></div>