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:5%"></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:66%"></span>
</div>

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

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

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

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

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

View HTML
<div class="progress playbar">
  <span class="meter" style="width:82%"></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:64%"></span>
</div>

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

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

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

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