Progressbar

Stylize the HTML5 <progress> element with a few extra classes and some crafty browser-specific CSS.

Basic

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%"></div>
</div>

Height

Labels

25%
50%

Colors


More colors

Striped


More colors

Multiple bars

Animated

Process

A process component communicates to the user the progress of a particular action.

Basic

<ul class="nav nav-process nav-process-circle">
  <li class="nav-item complete">
    <a class="nav-link" href="#"></a>
  </li>
  <li class="nav-item processing">
    <a class="nav-link" href="#"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"></a>
  </li>
</ul>

Colors

Try other colors

Sizes

Step title

Step description
Basic

<ul class="nav nav-process nav-process-iconic">
  <li class="nav-item complete">
    <a class="nav-link" href="#"><i class="fa fa-user"></i></a>
  </li>
  <li class="nav-item processing">
    <a class="nav-link" href="#"><i class="fa fa-credit-card"></i></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="fa fa-key"></i></a>
  </li>
</ul>

Colors

Try other colors

Sizes

Step title

Step description

Numeric

<ul class="nav nav-process nav-process-box">
  <li class="nav-item complete">
    <a class="nav-link" href="#">
      <span class="nav-link-number"><i class="ti-check"></i></span>
      <span class="nav-title">Confirm Order</span>
    </a>
  </li>

  ...
</ul>

Best practice

It is recommended to use box process in a separate card, or in card header with a bottom border. Following example demonstrates a box process in a separate card.

Spinners

A cross-browser library of CSS animations. As easy to use as an easy thing.

Official documentation

Material spinners

Circular SVG

Circular CSS

Linear

Misc spinners

Circular

Circular shadow

Ball

Dots

Color variations

Apply .spinner-* to any spinner to change its color, which * is a color name. Please note that since "Circular SVG" and "Circular CSS" material spinners are colorful, they don't accept color classes.