【VUE】实现一个无限循环的loading进度条

效果

VUE

<div class="loader">
  <div class="loading-progress"></div>
  <div class="loading-text">下载中...
  </div>
</div>

 CSS

.loader {
  width: 80px;
  margin-bottom: 18px;
  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, #67c23a 0%, #67c23a 25%, #B7D1AD 25%, #B7D1AD 50%, #67c23a 50%, #67c23a 75%, #B7D1AD 75%, #B7D1AD 100%);
  /* 背景颜色 */
  background-size: 10px 10px;
  /* 背景大小 */
  height: 10px;
  position: relative;
  border-radius: 10px;
  text-align: center;
}
.loader .loading-text {
  width: 100%;
  position: absolute;
  /*top: 10px;*/
  color: #606266;
  font-size: 14px;
  text-align: center;
}
@keyframes animationa {
  /* 修改背景定位 */
  0% {
    background-position: -10px 0;
  }
  100% {
    background-position: 10px 0;
  }

参考博客

css3 实现无限循环渐变进度条_gzyzwx的博客-CSDN博客_css 循环进度条

css3动画：实现无限循环进度条_mansion_sun的博客-CSDN博客_css 循环进度条

百度了很多案例，结合公司需求优化后的，如侵权请联系我