css3怎样实现进度条结果

这篇文章主要介绍了应用css3实现进度条结果及动态增加百分比，文中通过示例代码介绍的非常细致，对大家的学习或者工作拥有一定的参照 学习价值，需要的伴侣们下面随着小编来一起学习学习吧

项目历程中，开端运用了js的requestAnimationFrame办法实现进度条，但是在数据超级多的时候非常影响机能，如此改用css去实现，优化。

先贴代码：

    
    
    
    
    


    

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

        

    

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

正常状况下，百分比确定是依据后台数据进行盘算得出的，所以是动态传入的，下面贴vue代码

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

 
《script》
export default {
  props: {
    addGray: {
      //置灰
      type: Boolean,
      default: false
    },
    progressWidth: {
      //进度条百分比
      type: Number,
      default: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.addGray, "addGray---");
      this.$refs.processChild.style.width = this.progressWidth + "%";  //动态转变进度条
      // this.$refs.processChild.style.width = 90 + "%"; 测试结果
    });
  }
};
《script》
 

父组件调取：

看看现实结果：

举荐教程：《CSS教程》

以上就是css3 怎样实现进度条结果的细致内容，更多请关注 百分百源码网 其它相干文章！