css扇形圆环进度条,CSS3实现圆环进度条

Html:

50 %

var num = parseInt($(".proportion").html())*3.6;

if(num<180){

$(".left").css("transform","rotate(" + num + "deg)");

}else{

$(".left").css("transform","rotate(180deg)");

$(".right").css("transform","rotate(" + (num-180) + "deg)");

}

Css:

.wrap {

transform:rotate(-180deg);

width:110px;

height:110px;

position:relative;

border-radius:50%;

background:#42c02e;

}

.leftWrap {

width:55px;

height:110px;

position:absolute;

left:0;

top:0;

overflow:hidden;

}

.rightWrap {

width:55px;

height:110px;

position:absolute;

right:0;

top:0;

overflow:hidden;

}

.left {

width:55px;

height:110px;

border-radius:55px 0 0 55px;

background:#ddd;

transform-origin:right center;

}

.right {

width:55px;

height:110px;

border-radius:0 55px 55px 0;

background:#ddd;

transform-origin:left center;

}

.proportion {

transform:rotate(180deg);

width:96px;

height:96px;

line-height:96px;

position:absolute;

top:7px;

left:7px;

background:#fff;

border-radius:50%;

text-align:center;

font-size:20px;

}

效果如下：