CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Deekor
Deekor

Reputation: 9499

bootstrap progress bar not animating

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: broken progress bar

Edit

Here is the CSS being applied when I use the active class: enter image description here

Upvotes: 8

Views: 12229

Answers (4)

Wim Mertens
Wim Mertens

Reputation: 1790

Place the keyframes css at the top of your css file, not nested (if you uses sass) and don't add it in a media-query.

Upvotes: 1

Dilantha Maneth Perera
Dilantha Maneth Perera

Reputation: 31

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

Upvotes: 2

Armageddon08
Armageddon08

Reputation: 25

Have you actually tried reverting your changes to the colors? If not it may be worth trying that to see if it is your issue.

If thats nto the case i suggest you should default it back to stock and then just isolate it on its own and see how it goes. It may be a problem with other content in the html or something else confliting so if you load it into a blank document with stock settings.

I cant think of anything else at the moment. I hope it works.

Upvotes: 0

davidpauljunior
davidpauljunior

Reputation: 8338

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.

enter image description here

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

Upvotes: 8

Related Questions