css实现圆形百分比进度条 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .circle {
            width: 120px;
            height: 120px;
            position: relative;
            border-radius: 50%;
            background: #2c7efd;
        }

        .clip_left,.clip_right{
            width:120px;
            height:120px;
            position: absolute;
            top: 0px;left: 0px;
        }
        .circle_left, .circle_right{
            width:120px;
            height:120px;
            position: absolute;
            border-radius: 50%;
            top: 0px;left: 0px;
            background: #fdbf62;
        }
        /*出于展示用的改变背景色*/
        /*.circle_left{
            background: green;
        }
        .circle_right{
            background: lightblue;
        }*/
        .circle_right,.clip_right {
            clip:rect(0,auto,auto,60px);
        }
        .circle_left , .clip_left{
            clip:rect(0,60px,auto,0);
        }

        /*
        *当top和left取值为auto时，相当于0
        *当bottom和right取值为auto时，相当于100%
        */
        .mask {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            left: 15px;
            top: 15px;
            background: #FFF;
            position: absolute;
            text-align: center;
            line-height: 90px;
            font-size: 16px;
        }

    </style>
</head>
<body>
<!--背景圆-->
<div class="circle">
    <!--左半边圆-->
    <div class="circle_left">
        <div class="clip_left">

        </div>
    </div>
    <!--右半边圆-->
    <div class="circle_right">
        <div class="clip_right"></div>
    </div>
    <div class="mask">
        <span>40</span>%
    </div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
 <script> $(function(){ if( $('.mask span').text() <= 50 ){ $('.circle_right').css('transform','rotate('+($('.mask span').text()*3.6)+'deg)'); }else{ $('.circle_right').css({ 'transform':'rotate(0deg)', "background":"#2c7efd" }); $('.circle_left').css('transform','rotate('+(($('.mask span').text()-50)*3.6)+'deg)'); } }) </script> </body> </html>

 

posted @ 2018-07-24 17:35  前端凯凯  阅读(3409)  评论(0)    收藏  举报