Progress Bars

Color

Can have different colors

95%
65%
55%
75%
82%
35%
28%
<div class="wojo info progress" data-percent="95">
  <div class="bar">95%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo black progress" data-percent="65">
  <div class="bar">65%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo success progress" data-percent="55">
  <div class="bar">55%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo negative progress" data-percent="75">
  <div class="bar">75%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo warning progress" data-percent="82">
  <div class="bar">82%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo purple progress" data-percent="35">
  <div class="bar">35%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo teal progress" data-percent="28">
  <div class="bar">28%</div>
</div>
Striped

A progress bar can be striped

95%
65%
55%
75%
82%
35%
28%
<div class="wojo info striped progress" data-percent="95">
  <div class="bar">95%</div>
</div>

<div class="wojo basic divider"></div>
<div class="wojo black striped progress" data-percent="65">
  <div class="bar">65%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo success striped progress" data-percent="55">
  <div class="bar">55%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo negative striped progress" data-percent="75">
  <div class="bar">75%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo warning striped progress" data-percent="82">
  <div class="bar">82%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo purple striped progress" data-percent="35">
  <div class="bar">35%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo teal striped progress" data-percent="28">
  <div class="bar">28%</div>
</div>
Active

A progress bar can show activity

95%
65%
<div class="wojo info striped active progress" data-percent="95">
  <div class="bar">95%</div>
</div>
<div class="wojo basic divider"></div>
<div class="wojo black striped active progress" data-percent="65">
  <div class="bar">65%</div>
</div>
Size

A progress bar can be thinner

<div class="wojo thin striped info progress" data-percent="80">
  <div class="bar"> </div>
</div>
<div class="wojo thin striped success progress" data-percent="60">
  <div class="bar"> </div>
</div>
Headers

A progress bar can have headers

Web Design 92%

Marketing & PR 63%

<h3 class="wojo info header">Web Design
  <span class="push-right">92%</span></h3>
<div class="wojo striped info active progress" data-percent="92">
  <div class="bar"> </div>
</div>
<h3 class="wojo negative header">Marketing &amp; PR 
  <span class="push-right">63%</span></h3>
<div class="wojo striped negative active progress" data-percent="63">
  <div class="bar"> </div>
</div>