bootstrap progress bar not animating

Question

I've installed bootstrap to my Rails 4 application using the ruby gem.

I have copied and pasted the code for an animated progress bar straight from bootstraps docs into my page:

<div class="progress progress-striped active">
   <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
      <span class="sr-only">45% Complete</span>
   </div>
</div>

But the bar is not animating. The only thing I can think of is the fact that I changed the bar's color in the sass variables.

Why isn't it animating?

Edit

What my bar looks like:

Edit

Here is the CSS being applied when I use the active class:

Answer 1

It's just that the translucent white stripes (rgba(255,255,255,.15)) don't show up on certain colours.

Take the Chrome browser's yellow. If we take that colour in Photoshop, then place a white stripe over it with .15 opacity, it's not visible. I've put the outline on it here so you can see where the stripe is.

So for certain colours, you may need to adjust the alpha of the stripe colour. I've added a class of .progress-bar-primary to the .progress-bar, in a similar way to how you'd add .progress-bar-warning etc.

<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-primary"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Then for that .progress-bar-primary, just change the alpha of the stripe to your taste. For the Chrome Yellow, I've used .75 opacity.

.progress-bar-primary {
  background-color: yellow;
}

.progress-striped .progress-bar-primary {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .75)   25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, .75) 75%, transparent 75%, transparent);
}

Demo Here

Answer 2

Replace class="bar" with class="progress-bar".