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:70%"></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:98%"></span>
</div>
View HTML 
<div class="progress info">
  <span class="meter" style="width:86%"></span>
</div>
View HTML 
<div class="progress warning">
  <span class="meter" style="width:33%"></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:77%"></span>
</div>
View HTML 
<div class="progress play1">
  <span class="meter" style="width:44%"></span>
</div>
View HTML 
<div class="progress play3">
  <span class="meter" style="width:46%"></span>
</div>
View HTML 
<div class="progress play5">
  <span class="meter" style="width:90%"></span>
</div>
View HTML 
<div class="progress playbar">
  <span class="meter" style="width:67%"></span>
</div>
View HTML 
<div class="progress sub">
  <span class="meter" style="width:30%"></span>
</div>
View HTML 
<div class="progress connect-amp">
  <span class="meter" style="width:82%"></span>
</div>
View HTML 
<div class="progress connect">
  <span class="meter" style="width:49%"></span>
</div>
View HTML 
<div class="progress light">
  <span class="meter" style="width:80%"></span>
</div>
View HTML 
<div class="progress dark">
  <span class="meter" style="width:85%"></span>
</div>
View HTML 
<div class="progress amber">
  <span class="meter" style="width:31%"></span>
</div>