如何为进度条设置持续循环播放的背景动画？

要实现类似示例2的进度条效果，同时让进度条的背景动画持续循环，你可以通过自定义关键帧动画来实现背景渐变的滚动，调整以下代码即可解决问题：

完整代码实现 #

CSS 样式 #

.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    line-height: 0;
    font-size: .5625rem;
    background-color: #e4e7ea;
    border-radius: 4px;
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background: linear-gradient(40deg, #ffffff, #000000 50%, #ffffff);
    background-size: 200% 100%; /* 让渐变宽度足够，支持滚动动画 */
    transition: width .6s ease;
    animation: progress-bg-scroll 2s linear infinite; /* 持续循环的背景动画 */
}

/* 定义背景滚动的关键帧 */
@keyframes progress-bg-scroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }
}

HTML 结构 #

<div class="progress">
  <div class="progress-bar" style="width: 61.6%;"></div>
</div>

代码说明 #

• 给.progress-bar设置background-size: 200% 100%，让渐变背景宽度为元素的2倍，确保滚动时能形成连续循环效果。
• 通过@keyframes progress-bg-scroll定义背景位置从左到右的滚动动画，配合animation属性设置为无限循环播放。
• 保留原有transition: width .6s ease，确保进度条宽度变化的平滑过渡与背景动画互不干扰。

修改后，进度条背景会像示例2一样持续循环滚动，同时宽度变化的过渡效果也能正常工作。

内容的提问来源于stack exchange，提问作者garfield