用HTML、CSS、JS製做圓形進度條（無動畫效果）

邏輯

一、首先有一個圓：藍色的純淨的圓,效果：

 

二、再來兩個半圓，左邊一個，右邊一個將此藍色的圓蓋住，效果：

 

此時將右半圓旋轉60°，就會漏出底圓，效果：

 

而後咱們再用一個比底圓小的圓去覆蓋這個大圓就能夠出進度條效果了

 

代碼：

<style>
     /*支持IE9及以上*/
    .circle-bar {margin: 20px; font-size:200px; width: 1em; height: 1em; position: relative;  background-color: #29a6e6; }
    .circle-bar-left,.circle-bar-right { width: 1em; height: 1em;  }
    /*
        這裏採用clip剪切了圓，實現左右兩個半圓，右半圓在後面
     */
    .circle-bar-right { clip:rect(0,auto,auto,.5em);background-color: #e2e2e2; }
    .circle-bar-left { clip:rect(0,.5em,auto,0); background-color: red;}

    .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%; }
</style>

 

<div class="circle-bar">
    <div class="circle-bar-left"></div>
    <div class="circle-bar-right"></div>
     <!--遮罩層，顯示百分比-->
    <div class="mask">
        <span class="percent"></span>
    </div>
</div>

 

<script>
    $(function () {
        var percent = 0;
        var interval = setInterval(function () {
            //            var percent = parseInt($('.mask :first-child').text());
            percent+=5;
            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)');
            }
            $('.mask :first-child').html(percent + "%");
            if (percent == 100) {
                $('.circle-bar-right').css({
                    'transform': 'rotate(0deg)',
                    'background-color': '#e2e2e2'
                });
                $('.circle-bar-left').css({
                    'transform': 'rotate(0deg)',
                    'background-color': '#e2e2e2'
                });
                percent = 0;
                clearInterval(interval);
            }
        }, 1000);
    })
</script>

做者：何大必 連接：https://www.jianshu.com/p/e7bd35cd88cf 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。