Progress Bars

Progress bars express an unspecified wait time or display the length of a process.

html

<div class="progress">
  <div class="progress-bar bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Striped

CODE

html

<div class="progress">
  <div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Animated

CODE

html

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Custom height

CODE

html

<div class="progress" style="height: 5px;">
  <div class="progress-bar bg-tertiary" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Multiple progress

CODE

html

<div class="progress" style="height: 5px;">
  <div class="progress-bar bg-primary" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-tertiary" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Indeterminate

CODE

html

<div class="progress" style="height: 5px;">
  <div class="progress-bar bg-tertiary progress-bar-indeterminate"></div>
</div>

Indeterminate rainbow

This component requires Javascript for initialization. Click to view Javascript.

CODE

html

<div class="progress" style="height: 5px;">
  <div class="progress-bar progress-bar-rainbow">
    <div class="color-bar bg-tertiary"></div>
    <div class="color-bar bg-success"></div>
    <div class="color-bar bg-warning"></div>
    <div class="color-bar bg-primary"></div>
  </div>
</div>

Javascript

Only required for .progress-bar-rainbow variant.

var rainbowList = [].slice.call(document.querySelectorAll('.progress-bar-rainbow'))
var progressList = rainbowList.map(function (rainbow) {
  return new materialstyle.Rainbow(rainbow)
})

With jQuery

$('.progress-bar-rainbow').rainbow();

Theme Builder

Personalize Material Style to reflect your product's brand identity.

CONTENTS