用CSS3实现无限循环滚动条

在网页设计中，为了增强用户体验，我们经常会尝试各种创新的方法来展示内容。其中一种方法就是创建一个视觉上吸引人的无限循环滚动条。本文将介绍如何使用纯CSS3实现这样一个效果，而不需要依赖任何JavaScript代码。

<div class="loader">
  <div class="loading-progress" />
</div>

.loader {
  width: 100%;
  position: relative;
}
.loader .loading-progress {
  animation-duration: 1s;
  /* 动画时长1s */
  animation-fill-mode: forwards;
  /*当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）*/
  animation-iteration-count: infinite;
  /* 动画次数 无限次 */
  animation-name: animationa;
  /* 执行动画名称 */
  animation-timing-function: linear;
  /* 动画速度，线性匀速 */
  /* background: #f6f7f8; */
  background: linear-gradient(45deg, #409eff 0%, #409eff 25%, #e2e2e2 25%, #e2e2e2 50%, #409eff 50%, #409eff 75%, #e2e2e2 75%, #e2e2e2 100%);
  /* 背景颜色 */
  background-size: 10px 10px;
  /* 背景大小 */
  height: 6px;
  position: relative;
  border-radius: 6px;
  text-align: center;
}
@keyframes animationa {
  /* 修改背景定位 */
  0% {
    background-position: -10px 0;
  }
  100% {
    background-position: 10px 0;
  }
}