android源生进度条,如何使用源生css3实现圆环加载进度条

这次给大家带来如何使用源生css3实现圆环加载进度条，使用源生css3实现圆环加载进度条的注意事项有哪些，下面就是实战案例，一起来看一下。

效果图：

当时的要求是让进度条以扇形渐变的效果加载。我想了半天，好像只有用border-img来做渐变图了，还有一个超笨的方法就是写50个长方形分布在进度条上。css3提供的渐变有线性渐变，径向渐变和重复渐变，想不出来怎样实现扇形渐变。不说了，上代码：

Document

*{

margin: 0;

padding: 0;

}

.wrap,.circle,.percent{

position: absolute;

width: 200px;

height: 200px;

border-radius: 50%;

}

.wrap{

top:50px;

left:50px;

background-color: #ccc;

}

.circle{

box-sizing: border-box;

border:20px solid #ccc;

clip:rect(0,200px,200px,100px);

}

.clip-auto{

clip:rect(auto, auto, auto, auto);

}

.percent{

box-sizing: border-box;

top:-20px;

left:-20px;

}

.left{

transition:transform ease;

border:20px solid blue;

clip: rect(0,100px,200px,0);

}

.right{

border:20px solid blue;

clip: rect(0,200px,200px,100px);

}

.wth0{

width:0;

}

.num{

position: absolute;

box-sizing: border-box;

width: 160px;

height: 160px;

line-height: 160px;

text-align: center;

font-size: 40px;

left: 20px;

top: 20px;

border-radius: 50%;

background-color: #fff;

z-index: 1;

}

0%

var percent=0;

var loading=setInterval(function(){

if(percent>100){

percent=0;

$('.circle').removeClass('clip-auto');

$('.right').addClass('wth0');

}else if(percent>50){

$('.circle').addClass('clip-auto');

$('.right').removeClass('wth0');

}

$('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");

$('.num>span').text(percent);

percent++;

},200);

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：