改elementUI上的进度条为动画效果

最新推荐文章于 2025-06-04 18:05:46 发布

原创最新推荐文章于 2025-06-04 18:05:46 发布 · 7.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

css3 专栏收录该内容

4 篇文章

订阅专栏

本文介绍两种ElementUI进度条动画效果的实现方式，并对比了通过改变背景颜色与改变背景位置的方法对于性能的影响。前者可能导致卡顿，后者则更加流畅。

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

改elementUI上的进度条为动画效果

<el-progress
     class="layui-progress-bar"
     :text-inside="true"
     :stroke-width="18"
     :percentage="item.use"
     :color="item.customColor"
   ></el-progress>

第一种改变background 背景

<style>
.layui-progress-bar .el-progress-bar__inner:before {
    content:"";
    width:100%;
    height:100%;
    display:block;
    animation:move 1s linear infinite;
  }
@keyframes move {
    to {
        background:repeating-linear-gradient(-45deg,rgba(255,255,255,0.3) 0,rgba(255,255,255,0.3) 12.5%,transparent 0,transparent 25%) 0/60px 60px;
    }
    from {
        background:repeating-linear-gradient(-45deg,rgba(255,255,255,0.3) 12.5%,rgba(255,255,255,0.3) 25%,transparent 0%,transparent 37.5%) 0/60px 60px;
    }
} 
</style>

这一种直接修改background的背景，有点卡顿，猜想应该是每次渲染background的渐变样式会影响性能,也就是浏览器渲染这个背景时会比较浪费时间，所以会有卡顿想象

第二种改变background的位置

<style>
.layui-progress-bar .el-progress-bar__inner:before {
    content:"";
    width:100%;
    height:100%;
    display:block;
    background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,0.3) 0,rgba(255,255,255,0.3) 12.5%,transparent 0,transparent 25%);
    background-size:80px 80px;
    animation:move 2.5s linear infinite;
  }

@keyframes move {
  from {
    background-position: 80px 0;
  }
  to {
    background-position:  0;
  }
}
</style>