如何利用css3实现进度条效果及动态添加百分比

    
    
    
    
    
        *{margin: 0;padding: 0}
 
        .box{width: 100px;height: 10px;border-radius: 10px;background: #999;margin: 100px auto;border: 1px solid #ff6780;}
        .child{position: relative;height:100%;border-radius:inherit;}
 
        .process-animate{background: #ff6780;position: absolute;left: 0;top: 0;bottom: 0;border-radius:inherit;
            animation: process 1s linear forwards ;
        }
        @keyframes process
        {
            0%{
                left:0;right:100%;
            }
            20%{
                right:80%
            }
            40%{
                right:60%;
            }
            60%{right:40%;}
            80%{right:20%;}
            100%{right:0;}
        }
	
    


    
         // child的百分比就是进度条的占比效果
            

        

效果图（可查看动态效果）：

 正常情况下，百分比肯定是根据后台数据进行计算得出的，所以是动态传入的，下面贴vue代码

进度条子组件（progress.vue）：

 

 

.process-wrapper {
  width: 1.98rem;
  height: 0.13rem;
  margin: 0.12rem 0 0.1rem 0;
  border-radius: 0.1rem;
  background: #fff;
  border: 0.01rem solid #ff6780;
  &.addGray {
    background: #999;
    border: 0.01rem solid #999;
  }
  .process-child {
    position: relative;
    height: 100%;
    // width: 100%;  //这个width就是动态变化。通过js改变
    border-radius: inherit;
    .process-animate {
      background: #ff6780;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      border-radius: inherit;
      animation: process 1s linear forwards;
      &.addGray {
        background: #999 !important;
        // border: 0.01rem solid #999;
      }
    }
  }
}
 
@keyframes process {
  0% {
    left: 0;
    right: 100%;
  }
  20% {
    right: 80%;
  }
  40% {
    right: 60%;
  }
  60% {
    right: 40%;
  }
  80% {
    right: 20%;
  }
  100% {
    right: 0;
  }
}

父组件调用：

看看实际效果：

over;完美用css 解决了js递归动画性能消耗。

感谢你能够认真阅读完这篇文章，希望小编分享的“如何利用css3实现进度条效果及动态添加百分比”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!