.progress.active not animating

[webandtech]

Active progress bars are not animating in my Rails 4 app with bootstrap-sass 3.1.1.1. Downgrading to 3.1.1.0 fixes the issue.

My code:

<div class="progress progress-striped progress-small active">
  <div class="progress-bar progress-bar-success" style="width: 100%"></div>
</div>

[sinak]

Having this same issue.

Seems to be fixed by adding:

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

But not in Firefox - the progress bars don't even seem to be striped there.

[thomasdavis]

+1

[thomasdavis]

@-webkit-keyframes progress-bar-stripes {
 from  { background-position: 0 0; }
 to    { background-position: 40px 0; }
}


@-moz-keyframes progress-bar-stripes {
 from  { background-position: 0 0; }
 to    { background-position: 40px 0; }
}

Just added that code at the bottom of my css to override what bootsass was trying to do and it worked.

https://github.com/twbs/bootstrap-sass/blob/5e583f0219dc6195e3fc5910e053716c06b523ea/vendor/assets/stylesheets/bootstrap/_progress-bars.scss

[sinak]

So that doesn't seem to work in Firefox, as the stripes in progress-striped don't even show. The reason for this seems to be that something in rails/sass/bootstrap-sass is stripping the "-gradient" part of "linear-gradient" without browser prefixes.

So for example, background-image: linear-gradient(45deg becomes background-image: linear(45deg after processing by the asset pipeline.

I was able to fix using the bourbon gem and adding this code:

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

But I'm not sure how to fix this in the bootstrap-sass gem overall.

[sinak]

Just to reiterate, the final, complete fix using the Bourbon gem is to add:

@include keyframes(progress-bar-stripes) {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

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

Frustratingly just adding the resultant CSS doesn't work as "-gradient" is stripped from the non-vendor-prefixed "linear-gradient". I'm not sure what's causing that to get stripped though, if anyone has ideas they'd be much appreciated.

[synthdnb]

I think this issue occurred when Bootstrap started to manage vendor prefixes with autoprefixer.
twbs/bootstrap@cb7eb67#diff-263cb0d16954573b23bf1cc8c2a14e2cL9

[synthdnb]

Since bootstrap is going to deprecate vendor prefix mixins from less, I think bootstrap-sass gem will eventually need vendor prefixer...

[guyisra]

+1 having this also.. downgrading to 3.1.1.0 doesn't work for me

[coconitro]

+1 Running into this as well. Using the 3.1.1 package from bower.

[glebm]

Fixed in v3.2.0

[leomayleomay]

it's fixed in v3.2.0, but the latest support for Rails 3.2 is v3.1.1.0, I am wondering what's the fix for the projects still using Rails 3.2

[yassermog]

add this to your css ... it worked for me
.active{
animation: progress-bar-stripes 2s linear infinite;
}