【CSS3+HTML5+JQUERY】------ 实现环形进度条实例代码-（已简单封装）

1. JavaScript代码 circle.js文件:

简单的封装了一下 直接调用方法即可

(function ($$) {

    var lyCircle = {};

    lyCircle.options={
         timer:20,
         circleLeft:'.ly-circle-left',
         elements:"",
         circleRight:".ly-circle-right",
         percentSum:0,//百分比
         bgColor:'#00a7ff',
         borderColor:'#cdcdcd',
         name:"0",
         value:"0"
    };


    /** 环图div **/
    lyCircle.fnCircleDiv=function () {
        var circleDiv="";
        circleDiv+='<div class="ly-circle" {{style}}>';
        circleDiv+='  <div class="ly-circle-left ly-circle-ab" style="{{leftStyle}}" ></div>';
        circleDiv+='    <div class="ly-circle-right ly-circle-ab" style="{{rightStyle}}"></div>';
        circleDiv+='    <div class="ly-circle-text">';
        circleDiv+='    <span class="ly-circle-name">{{name}}</span>';
        circleDiv+='    <span class="ly-circle-value">/{{value}}</span>';
        circleDiv+='  </div>';
        circleDiv+='</div>';
        return circleDiv;
    };

    /**赋值百分比进度展示**/
    lyCircle.fnRenderCircleRate=function(percent,percentSum,bgColor,elements,circleLeft,circleRight){
        var percentSum=percentSum;
        var bgColor=bgColor;
        var elements=elements;
        var circleLeft=$(elements).find(circleLeft);
        var circleRight=$(elements).find(circleRight);
        if(percentSum==0){
            return;
        }
        if (percent <= 50) {
            circleRight.css({'transform':'rotate(' + 3.6 * percent  + 'deg)'});
        } else {
            circleRight.css({ 'transform': 'rotate(0)','border-color':bgColor});
            circleLeft.css({ 'transform': 'rotate(' + 3.6 * (percent  - 50) + 'deg)'});
        }
    };

    /** 渲染环图 **/
    lyCircle.fnlyCircleRender = function (options) {

        this.options   = $.extend({}, lyCircle.options, options);

        var name=lyCircle.options.name;
        var value=lyCircle.options.value;
        var $elements=lyCircle.options.elements;
        var bgColor=lyCircle.options.bgColor;
        var borderColor=lyCircle.options.borderColor;
        var circleLeft=lyCircle.options.circleLeft;
        var circleRight=lyCircle.options.circleRight;
        var percentSum=lyCircle.options.percentSum;
        var timer=lyCircle.options.timer;

        //创建环图
        var circleDiv=lyCircle.fnCircleDiv();
        circleDiv=circleDiv.replace("{{name}}",name);
        circleDiv=circleDiv.replace("{{value}}",value);
        circleDiv=circleDiv.replace("{{style}}","style='box-shadow: inset 0 0 0 4px "+bgColor+"'");
        if(percentSum>=50){
            circleDiv=circleDiv.replace("{{leftStyle}}","border-color:"+borderColor+"");
            circleDiv=circleDiv.replace("{{rightStyle}}","border-color:"+borderColor+"");
        }
        $($elements).html(circleDiv);

        //定时动画
        var percent=0;
        var set=setInterval(function () {
            percent=percent+1;
            if(percent==percentSum){
                clearInterval(set);
            }
            lyCircle.fnRenderCircleRate(percent,percentSum,bgColor,$elements,circleLeft,circleRight);
        },timer);

    }

    $$.lyCircle = lyCircle;
})(window);

2. css3 样式 cricle.css 

.ly-circle {
    width: 90px;
    height: 90px;
    position: relative;
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px #00a7ff;
    display: inline-flex;
    margin: 0px;
    border: 8px solid #f9f9f9;
}
.ly-circle-ab {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.ly-circle-left {
    border: 4px solid #dcdcdc;
    border-radius: 50%;
    clip: rect(0, 45px, 90px, 0);
    /*transform:rotate(0deg);*/
    /*transition: all 0.3s;*/
}

.ly-circle-right {
    border: 4px solid #dcdcdc;
    border-radius: 50%;
    clip: rect(0, 90px, 90px, 45px);
    /*transform:rotate(0deg);*/
    /*transition: all 0.5s;*/
}
.ly-circle-text {
    text-align: center;
    width: 90px;
    line-height: 90px;
}
.ly-circle-name {
    font-size: 16px;
    font-weight: 500;
    margin-right: -3px;
}
.ly-circle-value{
    font-size:12px;
    color: #aaa;
}

3.调用方法示例如下： 部分代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Title</title>
    <link rel="stylesheet" href="/libs/layui/v2.4.5/css/layui.css">
 
    <link rel="stylesheet" href="/libs/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/mpv/homePage/comon.css">
    <link rel="stylesheet" href="/mpv/libs/circle/circle.css">
    <link rel="stylesheet" href="/mpv/homePage/pendPresCount/pendPresCount.css">
    <style>

    </style>
</head>
<body>
<div class="div-row-body">
    <!--title头部-->
    <div class="div-row-header">
        <span class="header-span-title">待处理隐患统计</span>
        <!--<span class="header-data-count"><label>未读</label><label>0</label></span>-->
        <!--<span class="pull-more btn-more" title="更多"><i class="fa fa-ellipsis-h"></i> </span>-->
    </div>
    <!--主题内容-->
    <div class="div-row-content">
        <div class="div-row-data" style="display: inline-flex; margin: 5px 20px;    width: 100%;">
            <!--待整改-->
            <div class="circle-span">
                <div class="circle-block-dzg"></div>
                <p>待整改</p>
            </div>

        </div>
    </div>
</div>
<script src="/libs/jquery/jquery-3.2.1.min.js"></script>
<script src="/libs/layui/v2.4.5/layui.all.js"></script>
<script src="/mpv/libs/circle/circle.js"></script>

<script>
  $(document).ready(function () { 
      //调用环形   
      lyCircle.fnlyCircleRender({
           elements:".circle-block-dzg",
           percentSum:98,//百分比
           name:"593",
           value:"605",
           bgColor:"#00b706"
      });    
  })
</script>
</body>
</html>

 4.最后效果图：