bootstrap progress bar not animating

twitter-bootstrap, twitter-bootstrap-3

Solution

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

Problem

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:

Original source