2014-08-05
https://ld:44354/sap(bD1lbiZjPTAwMQ==)/bc/bsp/sap/zprod_ui5/progress.htm
實作原理:
index.js裡以100毫秒為時間間隔定期執行一個匿名函數. 在這個函數裡,動态設定目前progress circle的class。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5yYmBzYmFWZ1kzYwQ2N0QTOhlzM0EWO0gzM1gDMjV2Yx8CX5d2bs92Yl1iclB3bsVmdlR2LcNWaw9CXt92Yu4GZjlGbh5yYjV3Lc9CX6MHc0RHaiojIsJye.png)
可以在chrome console裡觀察到該函數周期性的執行:
在html file裡,每個1%的進度都有一組對應的class。每個class通過transform 實作動畫效果。
可以在chrome 裡觀察到degree的變化: