如何制作带有Flow animation流动动画效果的进度指示器？

你要实现的斜条纹流动进度条效果可以通过以下两种方案落地：

方案1：CSS实现（推荐，开发成本最低） #

核心原理是利用重复线性渐变制作斜条纹，再通过背景位移动画实现流动效果，代码量少、兼容性好，适合绝大多数前端场景。

实现步骤： #

• 定义进度条基础容器，设置overflow: hidden裁剪超出的填充区域
• 给进度填充层设置两层背景：底层是进度条主色，上层是重复的45度斜条纹渐变，用半透明高亮色和透明交替
• 定义匀速无限循环的背景位移动画，位移距离刚好等于一个斜条纹重复单元的宽度，避免动画衔接时出现断层

示例代码： #

/* 进度条容器 */
.progress-bar {
  width: 100%;
  height: 24px;
  background-color: #eee;
  border-radius: 12px;
  overflow: hidden;
}

/* 进度填充区域 */
.progress-value {
  height: 100%;
  /* 可根据实际进度动态修改宽度值 */
  width: 60%;
  background: 
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.3),
      rgba(255,255,255,0.3) 12px,
      transparent 12px,
      transparent 24px
    ),
    #2563eb;
  /* 动画：1s循环一次，匀速，无限播放 */
  animation: stripeFlow 1s linear infinite;
}

/* 流动动画定义 */
@keyframes stripeFlow {
  0% {
    background-position: 0 0;
  }
  100% {
    /* 位移宽度等于一个渐变重复单元的宽度，保证循环无卡顿 */
    background-position: 24px 0;
  }
}

效果调整说明： #

• 修改animation的时长参数可以调整流动速度，值越小速度越快
• 修改repeating-linear-gradient的角度参数可以调整条纹倾斜方向
• 修改渐变的颜色和宽度参数可以匹配不同的设计风格

方案2：Canvas实现（适合高性能/复杂定制场景） #

如果你的项目需要频繁更新进度、或者要做更复杂的动效定制，可以用Canvas实现，性能比CSS方案更稳定：

• 用createPattern方法创建可重复的斜条纹图案作为填充样式
• 用requestAnimationFrame驱动动画，每一帧更新图案的水平偏移量后重绘进度填充区域
• 进度值变化时直接修改填充区域的宽度即可，不需要额外调整动画逻辑

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