css3 如何实现进度条效果

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

先贴代码：

    
    
    
    
    


    

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

        

    

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

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

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

父组件调用：

看看实际效果：

推荐教程：《CSS教程》

以上就是css3 如何实现进度条效果的详细内容，更多请关注 第一PHP社区 其它相关文章！