Created by Jerry Wang, last modified on Aug 06, 2014 Go to start of metadata
创建一个新的BSP application和一个新的view, 将wiki末尾的html source code copy 进view.
创建两个mime object，类型为javascript:
实现原理:
- index.js里以100毫秒为时间间隔定期执行一个匿名函数. 在这个函数里，动态设置当前progress circle的class。
可以在chrome console里观察到该函数周期性的执行:
在html file里，每个1%的进度都有一组对应的class。每个class通过transform 实现动画效果。
可以在chrome 里观察到degree的变化:
ndex.js:
var $last = $(’.progress-radial’).last();
setInterval(function(){
var currentClass = $last.attr(‘class’).split(’ ')[1];
var currentPercentage = currentClass.substring(9,12);
var newPercentage = (parseInt(currentPercentage) + 1);
if (newPercentage > 100) {
newPercentage = 1;
}
var newClass = ‘progress-’ + newPercentage;
console.log("remove current class: " + currentClass);
console.log("add new class: " + newClass);
$last.removeClass(currentClass).addClass(newClass);
},100);
