css3圆弧占比,圆形进度条/百分比数据 --- 利用css3和js实现

乐师傅-注册

body {

font-family: "微软雅黑";

}

.circle {

width: 200px;

height: 200px;

position: absolute;

border-radius: 50%;

background: #0cc;

}

.pie_left, .pie_right {

width:200px;

height:200px;

position: absolute;

top: 0;left: 0;

}

.left, .right {

width:200px;

height:200px;

background:#00aacc;

border-radius: 50%;

position: absolute;

top: 0;

left: 0;

}

.pie_right, .right {

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

}

.pie_left, .left {

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

}

.mask {

width: 150px;

height: 150px;

border-radius: 50%;

left: 25px;

top: 25px;

background: #FFF;

position: absolute;

text-align: center;

line-height: 150px;

font-size: 20px;

font-weight: bold;

color: #00aacc;

}

0%

15%

30%

60%

90%

$(function() {

$('.circle').each(function(index, el) {

var num = $(this).find('span').text() * 3.6;

if (num<=180) {

$(this).find('.right').css('transform', "rotate(" + num + "deg)");

} else {

$(this).find('.right').css('transform', "rotate(180deg)");

$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");

};

});

});