html 进度条roll,js实现增加数字显示的环形进度条效果

效果如下：

代码如下：

.wapper{

position:absolute;

left:100px;

top:100px;

box-sizing:border-box;

}

.text{

position:absolute;

left:30px;

top:40px;

font-family:"Microsoft YaHei";

font-weight:bold;

color:indianred;

}

.rect{

position:absolute;

width:50px;

height:100px;

overflow:hidden;

}

.right{

left:50px;

}

.circle{

position:absolute;

width:100px;

height:100px;

border-radius:50%;

box-sizing:border-box;

border:5px solid indianred;

}

.circle_right{

left:-50px;

clip:rect(0px 50px 100px 0px);

animation:roll 5s linear 0s 1 forwards;

}

.circle_left{

clip:rect(0px 100px 100px 50px);

animation:roll 5s linear 5s 1 forwards;

}

@keyframes roll{

0%{transform:rotate(0deg)}

100%{ transform:rotate(180deg)}

}

1 %

window.οnlοad=function(){

var $num=document.getElementById('num');

(function(){

var i=1,timer;

add();

function add(){

var timer=setTimeout(function(){

add();

},100);

$num.innerHTML=i;

i<100?i++:clearTimeout(timer)

}

})();

}