环状进度条progress bar circle
- 2019 年 10 月 5 日
- 筆記
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://jerry.blog.csdn.net/article/details/101001336
2014-08-05
https://ag3.sap.corp:44354/sap(bD1lbiZjPTAwMQ==)/bc/bsp/sap/zprod_ui5/progress.htm 实现原理:
- index.js里以100毫秒为时间间隔定期执行一个匿名函数. 在这个函数里,动态设置当前progress circle的class。
可以在chrome console里观察到该函数周期性的执行:
- 在html file里,每个1%的进度都有一组对应的class。每个class通过transform 实现动画效果。
可以在chrome 里观察到degree的变化:
该例子来自: http://www.html5tricks.com/css3-3d-circle-progress.html