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

项目过程中,开始使用了js的requestAnimationFrame方法实现进度条,但是在数据超级多的时候非常影响性能,如此改用css去实现,优化。

先贴代码:




    
    
    
    Document
    


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

 

效果图(复制代码可查看动态效果):利用css3实现进度条效果以及动态添加百分比。_第1张图片

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

进度条子组件(progress.vue):





父组件调用:

 
 

看看实际效果:

利用css3实现进度条效果以及动态添加百分比。_第2张图片

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

你可能感兴趣的:(js补基础,vue学习,心得历程,css进度条,css原生动画)