CSS3實現圓形進度條

介紹

　　閑來無事，去了CSS3Plus網站逛了逛，發現了一個很有意思的實現--css3實現進度條。粗略看了下代碼，發現原理其實很簡單，不難理解。

現在在此講述下原理並實現一個1s更新的進度條。

　　技術細節是這樣的：進度條由兩個半圓環組成，首先我們的任務是實現左右兩個半圓環。圓環可以用border-radius實現，這樣就意味着該方

法不兼容IE8.可以使用clip來完成對整圓環的剪切；使用rotate函數完成圓環的旋轉，通過設置兩個半圓環的旋轉角度來實現不同進度值的顯示。

　　clip屬性是css2屬性，所有的瀏覽器都支持該屬性。對於clip有幾個要點需要注意：首先，使用clip屬性的元素必須是絕對定位或者固定定位的

元素，也就是說必須脫離文檔流；其次，clip可以使用的函數目前只有rect(top,right,bottom,left)，該函數傳遞4個值，其中top為裁剪區域距離

元素頂端的距離，設為auto時默認為0，right為裁剪區域距離元素左端（左邊框）的值，auto時默認為元素的最右端，bottom為裁剪區域距離元

素頂端的值，auto時默認為元素最底端，left為距離元素左邊的距離，auto時默認為0.

實現

　　

        .wrap{position: relative;width: 200px;height:200px;border-radius: 50%;background: #CCFFFF;text-align: center;}
        .right-part{width:200px;height: 200px;position: absolute;clip:rect(0px,auto,auto,100px)}
        .right{width: 200px;height:200px;position: absolute;border-radius: 50%;background: #003366;
            clip:rect(0px,auto,auto,100px);}
        .r-shadow{width: 150px;height:150px;border-radius: 50%;background: #fff;position: absolute;
            left:25px;top:25px;}

        .left-part{width:200px;height: 200px;position: absolute;clip:rect(0px,100px,auto,0px)}
        .left{width: 200px;height:200px;position: absolute;border-radius: 50%;background: #003366;
            clip:rect(0px,100px,auto,0px);}
        .l-shadow{width: 150px;height:150px;border-radius: 50%;background: #fff;position: absolute;
            left:25px;top:25px;}
        #desc{display:inline-block;width:200px;height:200px;line-height: 200px;font-size: 56px;position: absolute;
            left:0;}

     <div class="wrap">
        <div class="right-part">
            <div class="right" id="right"></div>
            <div class="r-shadow"></div>
        </div>
        <div class="left-part">
            <div class="left" id="left"></div>
            <div class="l-shadow"></div>
        </div>
        <span id="desc">ad</span>
    </div>

      function progressBar(percentage){
            var p = Math.round(percentage * 100);
            var deg = p * 3.6;
            var right = document.getElementById("right"),
                    left = document.getElementById("left"),
                    desc = document.getElementById("desc");
            if(p > 100 || p < 0) p = 100;
            if(deg <= 180){
                right.style.cssText = "transform:rotate("+(deg-180)+"deg);"
                left.style.cssText = "background:#CCFFFF;"
            }else{
                right.style.cssText = "transform:none;"
                left.style.cssText = "background:#003366;transform:rotate("+(deg-360)+"deg);"
            }
            if(desc.innerText){
                desc.innerText = p+"%"
            }
            if(desc.textContent){
                desc.textContent = p+"%";
            }
        }
        var g = 0;
        setTimeout(function _a(){
            if(g>1)return;
            progressBar(g);
            g += 0.1
            setTimeout(_a,1000)
        },1000)