我偶然发现了following progress bar。但是，我注意到条形组件上的脉冲动画具有恒定的持续时间，这意味着彩色条获得的时间越长，它的播放速度就越快。相应的（缩短的）代码如下：
Time使用短.progress {
&__bar {
animation: pulse 2s ease-out infinite;
}
}
@keyframes pulse {
0% {
background-position: -50% center, right center, left center;
}
100% {
background-position: 150% center, right center, left center;
}
}
条会拉伸，因此脉冲动画也会变快。有没有办法重写动画s.t.无论进度条有多长，它总是会有相同的速度？
答案 0 :(得分：0)
嗯，我forked your progress bar并且只做了一些scss更改。我玩过包装纸，绝对定位和隐藏溢出。
我创建了一个div [{1}}和一个@mixin innerBkg来处理只有固定宽度的背景，而div class="progress__bar--wrap"只能隐藏背景溢出（I＆＃ 39;我们一开始没有尝试过，但是overflow: hidden;也影响了文字和酒吧结束的光芒。关于最后一点，我已经z-index: 1改为:before和{:after 1}}伪元素。