环状进度条progress bar circle

207 阅读1分钟

2014-08-05

ag3.sap.corp:44354/sap(bD1lbiZ…
实现原理:

  1. index.js里以100毫秒为时间间隔定期执行一个匿名函数. 在这个函数里,动态设置当前progress circle的class。

可以在chrome console里观察到该函数周期性的执行:

  1. 在html file里,每个1%的进度都有一组对应的class。每个class通过transform 实现动画效果。

可以在chrome 里观察到degree的变化:

该例子来自: www.html5tricks.com/css3-3d-cir…
要获取更多Jerry的原创文章,请关注公众号"汪子熙":