环形进度条

先上效果图:

代码不多。

直接贴：

HTML:

<div class="box">
    <div class="rotate">
        <!-- 进度中圆角 start -->
        <div class="radius_bg">
            <div>
                <span></span>
            </div>
        </div>
        <!-- 进度中圆角 end -->

        <!-- 两端圆角 start -->
        <div class="radius_dot">
            <div class="after">
                <span></span>
            </div>
            <div class="before">
                <span></span>
            </div>
        </div>
        <!-- 两端圆角 end -->
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">0%</div>
    </div>
    <div class="popu"></div>
    <input type="range" name="" class="change" max=272 min=0 value=0>
</div>

CSS:

body{padding:10px;}
.box{width:100px;height:90px;color:#fff;overflow:hidden;margin:10px;background:#FFD105;padding:10px;}
.rotate{position:relative;width:100px;height:100px;margin:0 auto;background:#FFAB00;border-radius:500px;box-sizing: border-box;overflow:hidden;border:0;transform:rotate(-140deg);}
.left{position:absolute;width:50px;background:#FFAB00;height:100px;transform-origin:right center;z-index:2;}
.right{position:absolute;left:50px;width:100px;background:#fff;height:100px;transform-origin:left center;z-index:1;transform:rotate(-180deg);}
.center{width:80px;height:80px;left:10px;text-align:center;line-height:60px;position:absolute;top:10px;background:#FFD105;z-index:9;border-radius:500px;transform:rotate(140deg);}
.popu{width: 60px;height: 60px;transform: rotate(45deg);margin: 0 auto;margin-top: -33px;margin-bottom:-15px;position: relative;background: #FFD105;}
.left:before{content:"";top:-5px;left:36px;position:absolute;width:10px;height:10px;border-radius:50px;background:#ffab00;}
.left:after{content:"";left:-5px;top:36px;position:absolute;width:10px;height:10px;border-radius:50px;background:#ffab00;}
input{margin:0 auto;width:100px;z-index:9;position:relative;margin-top:-20px}
.radius_bg{width:100%;height:100%;position:absolute;transform:rotate(71deg);z-index:999}
.radius_dot{width:100%;height:100%;z-index:9;position:absolute;}
.radius_dot .before{left:50px;width:5px;height:10px;position:absolute;background:#ffd105}
.radius_dot .before span{width:10px;display:block;height:10px;border-radius:10px;background:#ffab00}
.radius_dot .after{left: 0px;width: 11px;top: 43px;height: 6px;position: absolute;background: #ffd105;}
.radius_dot .after span{width:10px;display:block;height:10px;border-radius:10px;background:#ffab00}
.radius_bg div{position:relative;width:100%;height:100%;}
.radius_bg span{z-index:10;position:absolute;width:10px;height:10px;left:1px;top:47px;margin-top:-13px;border-radius:10px;background:#fff;}

js:

$(function(){
    // 显示/隐藏数值条
    $(".change_bts").click(function(){
        if($(this).hasClass("visible")){
            $(this).removeClass("visible");
            $(".box").animate({
                "height":"90px"
            })
        }else{
            $(this).addClass("visible");
            $(".box").animate({
                "height":"120px"
            })
        }
    })

    // 改变事件
    $(".change").on({
        "input":function(){
            var rotate=$(this).closest(".box").find(".rotate"),
                    right=$(this).closest(".box").find(".right"),
                    left=$(this).closest(".box").find(".left"),
                    center=$(this).closest(".box").find(".center"),
                    radius_bg=$(this).closest(".box").find(".radius_bg"),
                    radius_dot=$(this).closest(".box").find(".radius_dot");
            // 小于180执行的事件
            if($(this).val()<=180){
                // 起始圆角 start
                if($(this).val()/272*100 < 0.5){
                    radius_bg.find("span").hide();
                    radius_dot.find(".before span").css("background","#ffab00")
                }else{
                    radius_bg.find("span").show();
                    radius_dot.find(".before span").css("background","#fff")
                }
                // 起始圆角 end

                rotate.css("background","#FFAB00");
                right.css({
                    "zIndex":1,
                    "transform":"rotate("+parseInt($(this).val()-180)+"deg)"
                })
                left.css({
                    "zIndex":2,
                    "transform":"rotate(0)"
                });
                // 大于180执行的事件
            }else{
                rotate.css("background","#fff");
                left.css({
                    "zIndex":1,
                    "transform":"rotate("+parseInt($(this).val()-180)+"deg)"
                })
                right.css({
                    "zIndex":2,
                    "transform":"rotate(0)"
                });
                // 结束圆角 start
                if($(this).val()/272*100 < 100){
                        radius_dot.find(".after span").css("background","#ffab00")
                }else{
                        radius_dot.find(".after span").css("background","#fff")
                }
                // 结束圆角 end

            }
            center.html(parseInt($(this).val()/272*100)+"%");
            var rotate=78 + (345-78)*($(this).val()/272);
            radius_bg.css({
                "transform":"rotate("+ rotate +"deg)"
            })
        }
    })

    // 遍厉需要执行的元素
    $(".box").each(function(){
        new chang($(this).find(".change"),parseInt(Math.random()*100));
    })
})

// 改变数值函数;
function  chang(obj,num){
    // 环形进度条根据传值来确定位置;
    // 注: 此进度计算方法只适用于当前环形;
    console.log(num);
    var num=(num+0.5)*272/100;
    obj.animate({
        // 指定一个无用值
        "font-size":num
    },{
        // 运行时即时执行改变事件
        step:function(n,i){
            obj.val(n).trigger("input")
        },
        duration:num*10,
        // 重置无用值
        done:function(){
            obj.css("font-size","")
        }
    })
}