【VUE】实现一个无限循环的loading进度条_永远不会到100的进度条 vue-优快云博客

本文链接：https://blog.youkuaiyun.com/sailor_studio/article/details/123073012

本文介绍了如何使用Vue和CSS3创建一个美观且无限循环的加载进度条，通过关键帧动画实现动画效果，并提供了详细的代码示例和参考链接，适合前端开发者优化用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

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;
  }