環形進度條

jQuery + CSS3

實現原理

原理非常的簡單，在這個方案中，最主要使用了CSS3的transform中的rotate和CSS3的clip兩個屬性。用他們來實現半圓和旋轉效果。

半環的實現

先來看其結構。

html

<div class="pie_right">
    <div class="right"></div>
    <div class="mask"><span>0</span>%</div>
</div>

　　css

.pie_right {
    width:200px; 
    height:200px;
    position: absolute;
    top: 0;
    left: 0;
    background:#0cc;
}
.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);
}
.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;
    background: #0cc;
    /* mask 是不需要剪切的，此處只是為了讓大家看到效果*/
    clip:rect(0,auto,auto,75px); }

　　實現半圓還是挺簡單的，利用border-radius做出圓角，然后利用clip做出剪切效果，（clip使用方法，詳見站內介紹），mask的部分是為了遮擋外面的容器，致使在視覺上產生圓環的效果：

旋轉的話，那更容易實現了，就是在CSS的right中加入.right { transform: rotate(30deg); }

這樣就可以看到一個半弧旋轉的效果了。

整環的實現

同樣道理，拼接左半邊圓環

<div class="circle">
    <div class="pie_left"><div class="left"></div></div>
    <div class="pie_right"><div class="right"></div></div>
    <div class="mask"><span>0</span>%</div>
</div>

　　

.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 {
    display: block;
    width:200px; 
    height:200px;
    background:#00aacc;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(30deg);
}
.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: 16px;
}

圓環最終效果

Ok了，基本上我們的圓環已經實現完成了，下面是加入JS效果。

首先，我們需要考慮的是，圓環的轉動幅度大小，是由圓環里面數字的百分比決定的，從0%-100%，那么圓弧被分成了每份3.6°；而在180°，也就是50%進度之前，左側的半弧是不動的，當超過50%，左邊的半弧才會有轉動顯示。

$(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)");
        };
    });

});