PaperCSS

the less formal CSS framework

Get PaperCSS Documentation About Github
^

Progress

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>

Documentation

Made with 💛 by Rhyne and some fantastic contributors!