@@include('docs/_sidebar.html', {"page": "elements-progressbar"})

Line

Available color options:

primary, aqua, green, leaf, navy, orange, pink, purple, red, violet, yellow, fuchsia, sky, grape, soft-primary, soft-aqua, soft-green, soft-leaf, soft-navy, soft-orange, soft-pink, soft-purple, soft-red, soft-violet, soft-yellow, soft-fuchsia, soft-sky, soft-grape

Marketing
Strategy
Development
Stabilization

Marketing
Strategy
Development
Stabilization

View example's code

<ul class="progress-list">
  <li>
    <p>Marketing</p>
    <div class="progressbar line blue" data-value="100"></div>
  </li>
  <li>
    <p>Strategy</p>
    <div class="progressbar line green" data-value="80"></div>
  </li>
  <li>
    <p>Development</p>
    <div class="progressbar line red" data-value="85"></div>
  </li>
  <li>
    <p>Stabilization</p>
    <div class="progressbar line yellow" data-value="75"></div>
  </li>
</ul>
<!-- /.progress-list -->

Semi Circle

Available color options:

View example's code

<div class="progressbar semi-circle blue" data-value="40"></div>
  
<div class="progressbar semi-circle green" data-value="80"></div>
  
<div class="progressbar semi-circle soft-red" data-value="65"></div>
  
<div class="progressbar semi-circle soft-yellow" data-value="45"></div>

Progressbar

Line

Semi Circle