特效描述：html5 css3 圆形百分比 加载动画特效。html5 css3 loading加载动画，圆形百分比进度条加载动画，加载完成显示健康度检测得分情况。
代码结构
1. 引入JS
2. HTML代码
0%
0分
function doit(oid, n) {
var o = document.getElementById(oid);
var i = parseInt(o.innerHTML) + 1;
if (isNaN(i)) i = 0;
o.innerHTML = i.toString();
if (i < n) setTimeout('doit(\'' + oid + '\',' + n + ')', 100);
}
//doit('score', 100);
var slots={},c=document.getElementById('loadingProgress'),ctx=c.getContext('2d');
window.hasLoaded = 0;
window.loading = false;
window.ulp = ulp;
function ulp(percent){
window.loading = true;
var i = 0, draw = null;
draw = setInterval(function(){
if (window.hasLoaded > 100) {
window.loading = false;
clearInterval(draw);
draw = null;
return true;
}
if (i
d();
i++;
window.hasLoaded += 1;
} else {
clearInterval(draw);
draw = null;
}
}, 10);
}
function d(){
var lp = document.getElementById('loadedNum');
lp.innerHTML = window.hasLoaded;
var loaded = window.hasLoaded * 2 / 100 * Math.PI, cw = 250, hcw = 125;
ctx.clearRect (0,0,cw,cw);
ctx.beginPath();
ctx.arc(hcw,hcw,hcw-4, 0, loaded, false);
ctx.lineWidth = 40;
ctx.strokeStyle = '#ffb400';
ctx.stroke();
}
//ulp(69);
$(function(){
doit('score', 100);
setTimeout(function(){
$(".score_content").hide();
$("#splash").show();
ulp(69);
},11000);
})
如果觉得《html5 黑色圆圈 html5 css3圆形百分比加载动画特效》对你有帮助，请点赞、收藏，并留下你的观点哦！
