Progress Bar

How it works

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 progress element, ensuring you can stack progress bars, animate them, and place text labels over them.

We use the .progress as a wrapper to indicate the max value of the progress bar.
We use the inner .progress-bar to indicate the progress so far.
The .progress-bar requires an inline style, utility class, or custom CSS to set their width.


        <div class="progress primary" style="height: 4px;">
          <div class="progress-bar" style="width: 25%;"></div>
        </div>

        <div class="progress primary">
          <div class="progress-bar" style="width: 25%;"></div>
        </div>

        <div class="progress secondary">
          <div class="progress-bar" style="width: 60%;"></div>
        </div>

        <div class="progress success">
          <div class="progress-bar" style="width: 50%;"></div>
        </div>

        <div class="progress danger">
          <div class="progress-bar" style="width: 75%;"></div>
        </div>

        <div class="progress warning">
          <div class="progress-bar" style="width: 65%;"></div>
        </div>

        <div class="progress gray">
          <div class="progress-bar" style="width: 90%;"></div>
        </div>

        <div class="progress info">
          <div class="progress-bar" style="width: 95%;"></div>
        </div>

Striped Bars

To get stripe on Progress bar simply add .striped class on .progress-bar

50%


        <div class="progress primary" style="height: 4px;">
          <div class="progress-bar striped" style="width: 25%;"></div>
        </div>

        <div class="progress primary">
          <div class="progress-bar striped" style="width: 25%;"></div>
        </div>

        <div class="progress success">
          <div class="progress-bar striped" style="width: 50%;"></div>
        </div>

        <div class="progress secondary">
          <div class="progress-bar striped" style="width: 50%;">
            50%
          </div>
        </div>

Animated Striped Bars

To get animated stripe on Progress bar simply add .striped .animated-stripe class on .progress-bar

50%


        <div class="progress primary" style="height: 4px;">
          <div class="progress-bar striped animated-stripe" style="width: 25%;"></div>
        </div>

        <div class="progress primary">
          <div class="progress-bar striped animated-stripe" style="width: 25%;"></div>
        </div>

        <div class="progress success">
          <div class="progress-bar striped animated-stripe" style="width: 50%;"></div>
        </div>

        <div class="progress secondary">
          <div class="progress-bar striped animated-stripe" style="width: 50%;">
            50%
          </div>
        </div>

Unlimited Websites Cpanel Hosting Only $0.99 per month - Click here

Documentation v4.0

Progress Bar

How it works

Striped Bars

Animated Striped Bars