Progress Bars

A simple way to add progress bars to your layouts. You only need two HTML elements to make them and they're easy to customize.

You can create a progress bar using minimal markup.

View HTML
<div class="progress default">
  <span class="meter" style="width:66%"></span>
</div>

Advanced

Additional classes can be added to your progress bar to change its appearance.

View HTML
<div class="progress success">
  <span class="meter" style="width:87%"></span>
</div>

View HTML
<div class="progress info">
  <span class="meter" style="width:72%"></span>
</div>

View HTML
<div class="progress warning">
  <span class="meter" style="width:95%"></span>
</div>

Color Palette

You can also use any of the Sonos product color classes.

View HTML
<div class="progress alt">
  <span class="meter" style="width:81%"></span>
</div>

View HTML
<div class="progress play1">
  <span class="meter" style="width:88%"></span>
</div>

View HTML
<div class="progress play3">
  <span class="meter" style="width:100%"></span>
</div>

View HTML
<div class="progress play5">
  <span class="meter" style="width:18%"></span>
</div>

View HTML
<div class="progress playbar">
  <span class="meter" style="width:94%"></span>
</div>

View HTML
<div class="progress sub">
  <span class="meter" style="width:94%"></span>
</div>

View HTML
<div class="progress connect-amp">
  <span class="meter" style="width:21%"></span>
</div>

View HTML
<div class="progress connect">
  <span class="meter" style="width:2%"></span>
</div>

View HTML
<div class="progress light">
  <span class="meter" style="width:95%"></span>
</div>

View HTML
<div class="progress dark">
  <span class="meter" style="width:59%"></span>
</div>

View HTML
<div class="progress amber">
  <span class="meter" style="width:25%"></span>
</div>