vue使用CSS3实现进度条加载效果

最新推荐文章于 2024-05-31 00:29:34 发布

Cardhu丶

最新推荐文章于 2024-05-31 00:29:34 发布

阅读量458

点赞数

分类专栏： vue 文章标签： vue css3

本文链接：https://blog.csdn.net/weixin_43996368/article/details/117778884

版权

vue 专栏收录该内容

57 篇文章 8 订阅

订阅专栏

<div class="animation progressAnimation"></div>

//进度条
.animation {
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(to right, #ffffff01, #ffffff90);
  height: 8px;
  border-radius: 4px;
  opacity: 0.7;
}

.progressAnimation {
  animation: progressPercent 5s linear infinite;
}
@keyframes progressPercent {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}