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:39%"></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:65%"></span>
</div>

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

View HTML
<div class="progress warning">
  <span class="meter" style="width:62%"></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:39%"></span>
</div>

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

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

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

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

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

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

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

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

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

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