bootstrap进度条厚度超过40px

Question

我想使用bootstrap的进度条作为看上去很棒的路障磁带。这非常好，我也希望我能让酒吧更厚。所以我将活动进度条的背景大小从40px更改为60：

div.progress.active .progress-bar {
    background-size: 60px 60px;
}

到目前为止，条形图现在更厚了，但动画不再正确循环。

我需要更改什么才能在60而不是40像素后发生循环？

亲自看看：http://jsfiddle.net/ok94vqoa/1/

Answer 1

您还需要将progress-bar-stripes动画的关键帧更新为60px。

jsFiddle

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