papercss/docs/content/docs/components/progress.md

title	description
Progress	PaperCSS Progress Bars

Progress components are built with two HTML elements:

• A .progress wrapper element.
• A .bar element to show the progress so far.

Basic usage

Code

<div class="row">
  <div class="progress margin-bottom">
    <div class="bar w-0"></div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar w-25"></div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar w-50"></div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar w-75"></div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar w-100"></div>
  </div>
</div>

Note how we can specify the width using .w-50, .w-75, etc. If a width class is not provided then 0% is used as default.

Backgrounds

Code

<div class="row">
  <div class="progress margin-bottom">
    <div class="bar w-25"></div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar secondary w-40"></div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar success w-55"></div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar warning w-70"></div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar danger w-85"></div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar muted w-100"></div>
  </div>
</div>

Labels

25%

40%

55%

70%

85%

100%

Code

<div class="row">
  <div class="progress margin-bottom">
    <div class="bar w-25">25%</div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar secondary w-40">40%</div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar success w-55">55%</div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar warning w-70">70%</div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar danger w-85">85%</div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar muted w-100">100%</div>
  </div>
</div>

Striped

Code

<div class="row">
  <div class="progress margin-bottom">
    <div class="bar striped w-25"></div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar striped secondary w-40"></div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar striped success w-55"></div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar striped warning w-70"></div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar striped danger w-85"></div>
  </div>
  <div class="progress margin-bottom">
    <div class="bar striped muted w-100"></div>
  </div>
</div>