css实现圆环进度条

css 部分

     .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; }
        .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; }

 

页面

    <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>80</span>%</div>
    </div>

 

jquery 控制

        $(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)", transition: "transform 1s" });
                } else {
                    $(this).find('.right').css({ transform: "rotate(180deg)", transition: "transform 1s linear" });

                    $(this).find('.left').css({ transform: "rotate(" + (num - 180) + "deg)", transition: "transform 0.5s 1s linear" });
                };
            });

        });

完成效果

======自定义成为插件===================

(function ($) {
    $.fn.mycircle= function (options) {
        var defaults = {
            title:"",
            number: 0, //比例
            size: 300, //圆形大小
            color: "#0cc", //圆环进度条颜色
            bgcolor: "#00aacc",
            in_size: 250,  //内圆大小
            in_color: "#fff", //
            elem: $(this),
        };

        var opts = $.extend(defaults, options);
        opts.elem.addClass("circle");

        var htm = "<div class='pie_left'><div class='left'></div></div>" +
                "<div class='pie_right'><div class='right'></div></div>" +
                //"<div class='mask'>" + opts.number + "</div>";
                 "<div class='mask'>"+opts.title+"</div>";


        opts.elem.append(htm);

        var size = opts.size + "px";
        var size_half = opts.size / 2 + "px";

        var elem = opts.elem;
        elem.css({ height: size, width: size, backgroundColor: opts.color });
        elem.children().eq(0).css({ height: size, width: size, "clip": "rect(0," + size_half + ",auto,0)" });
        elem.children().eq(1).css({ height: size, width: size, "clip": "rect(0,auto,auto," + size_half + ")" });

        //圆环大小
       var yh = (opts.size - opts.in_size)/2 + "px";
       elem.children().eq(2).css({ height: opts.in_size + "px", width: opts.in_size + "px", backgroundColor: opts.in_color, "left": yh, "top": yh, "line-height": opts.in_size + "px" });


       // left right
        elem.children().eq(0).children().css({ "clip": "rect(0," + size_half + ",auto,0)",backgroundColor:opts.bgcolor });
        elem.children().eq(1).children().css({ "clip": "rect(0,auto,auto," + size_half + ")", backgroundColor: opts.bgcolor});
      
        setTimeout(function () {
            $('.circle').each(function (index, el) {
                var num = opts.number * 3.6;
                if (num <= 180) {
                    $(this).find('.right').css({ transform: "rotate(" + num + "deg)", transition: "transform 1s linear" });
                } else {
                    $(this).find('.right').css({ transform: "rotate(180deg)", transition: "transform 1s linear" });
                    $(this).find('.left').css({ transform: "rotate(" + (num - 180) + "deg)", transition: "transform 0.5s 1s linear" });
                };
            });

        }, 300)
    };
})(jQuery);

 

css 同上

  .circle { position:relative; border-radius: 50%; background: #0cc; }
        .circle .pie_left, .pie_right {position: absolute; top: 0; left: 0; }
        .circle .left, .right { display: block; width:100%; height: 100%; background: #00aacc; border-radius: 50%; position: absolute; top: 0; left: 0;/*transform: rotate(0deg);*/ }
        .circle .pie_right, .right {  }
        .circle .pie_left, .left {  }
        .circle .mask {  border-radius: 50%; position: absolute; text-align: center;  }

调用测试

        $(function () {
            $("#test1").mycircle({title:"测试", number: 80});
        });