<div class="sui-progress">
  <div style="width: 20%;" class="bar">20%</div>
</div>
<div class="sui-progress progress-danger">
  <div style="width: 40%;" class="bar">40%</div>
</div>
<div class="sui-progress progress-success">
  <div style="width: 60%;" class="bar">60%</div>
</div>
<div class="sui-progress progress-warning">
  <div style="width: 80%;" class="bar">80%</div>
</div>
<div class="sui-progress progress-info">
  <div style="width: 100%;" class="bar">100%</div>
</div>

<div class="sui-progress progress-small">
  <div style="width: 60%;" class="bar">60%</div>
</div>
<div class="sui-progress">
  <div style="width: 60%;" class="bar">60%</div>
</div>
<div class="sui-progress progress-large">
  <div style="width: 60%;" class="bar">60%</div>
</div>
<div class="sui-progress progress-xlarge">
  <div style="width: 60%;" class="bar">60%</div>
</div>

<div class="sui-progress progress-small">
  <div style="width: 30%;" class="bar"></div>
  <div class="bar-text">30%</div>
</div>
<div class="sui-progress">
  <div style="width: 40%;" class="bar"></div>
  <div class="bar-text">40%</div>
</div>
<div class="sui-progress progress-large">
  <div style="width: 50%;" class="bar"></div>
  <div class="bar-text">50%</div>
</div>
<div class="sui-progress progress-xlarge">
  <div style="width: 60%;" class="bar"></div>
  <div class="bar-text">60%</div>
</div>

<div class="sui-progress progress-striped">
  <div style="width: 60%;" class="bar"></div>
</div>
<div class="sui-progress progress-danger progress-striped">
  <div style="width: 60%;" class="bar"></div>
</div>
<div class="sui-progress progress-success progress-striped">
  <div style="width: 60%;" class="bar"></div>
</div>
<div class="sui-progress progress-warning progress-striped">
  <div style="width: 60%;" class="bar"></div>
</div>
<div class="sui-progress progress-info progress-striped">
  <div style="width: 60%;" class="bar"></div>
</div>

<div class="sui-progress progress-striped active">
  <div style="width: 60%;" class="bar"></div>
</div>
<div class="sui-progress progress-danger progress-striped active">
  <div style="width: 60%;" class="bar"></div>
</div>
<div class="sui-progress progress-success progress-striped active">
  <div style="width: 60%;" class="bar"></div>
</div>
<div class="sui-progress progress-warning progress-striped active">
  <div style="width: 60%;" class="bar"></div>
</div>
<div class="sui-progress progress-info progress-striped active">
  <div style="width: 60%;" class="bar"></div>
</div>

<div class="sui-progress">
  <div style="width: 40%;" class="bar bar-success"></div>
  <div style="width: 20%;" class="bar bar-danger"></div>
  <div style="width: 10%;" class="bar bar-warning"></div>
</div>