CSS3+JS实现静态圆形进度条

一、实现原理

二、代码实现

<div class="circle-bar">
    <div class="circle-bar-left"></div>
    <div class="circle-bar-right"></div>
    <!-- 遮罩层，显示百分比 -->
    <div class="mask">
        <span class="percent">60%</span>
    </div>
</div>

    /*支持IE9及以上*/
    .circle-bar { font-size:200px; width: 1em; height: 1em; position: relative;  background-color: #333; }
    .circle-bar-left,.circle-bar-right { width: 1em; height: 1em; background-color: #eee; }
    /*
        这里采用clip剪切了圆，实现左右两个半圆，右半圆在后面，因此在更上一层，
        clip的用法参考：http://www.w3school.com.cn/cssref/pr_pos_clip.asp
     */
    .circle-bar-right { clip:rect(0,auto,auto,.5em); }
    .circle-bar-left { clip:rect(0,.5em,auto,0); }
    
    .mask { width: 0.8em; height: 0.8em;  background-color: #fff;text-align: center;line-height: 0.2em; color:rgba(0,0,0,0.5); }
    .mask :first-child { font-size: 0.3em; height: 0.8em; line-height: 0.8em; display: block;  }
    /*所有的后代都水平垂直居中，这样就是同心圆了*/
    .circle-bar * {  position: absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
    /*自身以及子元素都是圆*/
    .circle-bar, .circle-bar > * { border-radius: 50%; }
    

    //反正CSS3中的border-radius属性IE8是不支持了，所以这里就用新方法吧getElementsByClassName()走起
    window.onload = function(){

        var circleBar    = document.getElementsByClassName('circle-bar')[0];
        var percent      = parseInt(circleBar.getElementsByClassName('percent')[0].firstChild.nodeValue);
        var color        = circleBar.css('background-color');
        var left_circle  = circleBar.getElementsByClassName('circle-bar-left')[0];
        var right_circle = circleBar.getElementsByClassName('circle-bar-right')[0];

        if( percent <= 50 ) {
            var rotate = 'rotate('+(percent*3.6)+'deg)';
            right_circle.css3('transform',rotate);
        }else {
            var rotate = 'rotate('+((percent-50)*3.6)+'deg)';
            right_circle.css ('background-color',color);//背景色设置为进度条的颜色
            right_circle.css3('transform','rotate(0deg)');//右侧不旋转
            left_circle.css3 ('transform',rotate);//左侧旋转
        }
    }

    //封装了css3函数，主要是懒得重复书写代码，既然写了css3函数，顺便写个css吧，统一样式，好看一些
    Element.prototype.css = function(property,value){
        
        if ( value ) {
            //CSS中像background-color这样的属性，‘-’在JavaScript中不兼容，需要设置成驼峰格式
            var index = property.indexOf('-');
            if( index != -1 ) {
                var char = property.charAt(index+1).toUpperCase();
                property.replace(/(-*){1}/,char);
            }
            this.style[property] = value;
        }else{
            //getPropertyValue()方法参数类似background-color写法，所以不要转驼峰格式
            return window.getComputedStyle(this).getPropertyValue(property);
        }
    }

    //封装一个css3函数，用来快速设置css3属性
    Element.prototype.css3 = function(property,value){
        if( value ){
            property = capitalize(property.toLowerCase());
            this.style['webkit'+property] = value;
            this.style['Moz'+property] = value;
            this.style['ms'+property] = value;
            this.style['O'+property] = value;
            this.style[property.toLowerCase()] = value;
        }else{
            return window.getComputedStyle(this).getPropertyValue(
                    ('webkit'+property)||('Moz'+property)||('ms'+property)||('O'+property)||property);
                    //老实说，我不知道为什么要把不带浏览器标记的放在最后，既然都这么用，我也这么做吧。不过这样对现代浏览器来说可能并不好，判断次数变多了
        }
        
        //首字母大写
        function capitalize(word){
            return word.charAt(0).toUpperCase() + word.slice(1);
        }
    }

    $(function(){

        var percent = parseInt($('.mask :first-child').text());
        var baseColor = $('.circle-bar').css('background-color');

        if( percent<=50 ){
            $('.circle-bar-right').css('transform','rotate('+(percent*3.6)+'deg)');
        }else {
            $('.circle-bar-right').css({
                'transform':'rotate(0deg)',
                'background-color':baseColor
            });
            $('.circle-bar-left').css('transform','rotate('+((percent-50)*3.6)+'deg)');
        }
    })

三、总结体会

来源：segmentfault