Mix striped and non-striped progress bars

Created by: tristanlins

It is possible to mix striped and non-striped progress bars by using an inline element around the progress-bar element, like this:

<div class="progress active">
  <div class="progress-bar progress-bar-success" style="width: 35%">...</div>

  <span class="progress-striped">
    <div class="progress-bar" style="width: 45%">...</div>
    </span>
</div>

The result:

This is not really smart, wouldn't it be easier when I could add the *-striped and active class directly to the progress-bar element?

<div class="progress active">
  <div class="progress-bar progress-bar-success" style="width: 35%">...</div>  
  <div class="progress-bar progress-bar-striped" style="width: 25%">...</div>  
  <div class="progress-bar progress-bar-striped active" style="width: 15%">...</div>
</div>