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-pink" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Striped

html

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

Animated

html

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

Custom height

html

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

Multiple progress

html

<div class="progress">
  <div class="progress-bar bg-purple" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-pink" 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

html

<div class="progress">
  <div class="progress-bar bg-pink progress-bar-indeterminate"></div>
</div>

Indeterminate rainbow

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

html

<div class="progress">
  <div class="progress-bar progress-bar-rainbow">
    <div class="color-bar bg-red"></div>
    <div class="color-bar bg-green"></div>
    <div class="color-bar bg-yellow"></div>
    <div class="color-bar bg-blue"></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();

CONTENTS