[CSS3]环形进度条

来源：https://codepen.io/eZ0/pen/eZXNzd

点击上面链接有源码有示例。

 

.ko-progress-circle {
    width: 120px;
    height: 120px;
    background-color: #d9d9d9;
    border-radius: 50%
}

.ko-progress-circle .ko-progress-circle__slice,
.ko-progress-circle .ko-progress-circle__fill {
    width: 120px;
    height: 120px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    transition: transform 1s;
    border-radius: 50%
}

.ko-progress-circle .ko-progress-circle__slice {
    clip: rect(0px,120px,120px,60px)
}

.ko-progress-circle .ko-progress-circle__slice .ko-progress-circle__fill {
    clip: rect(0px,60px,120px,0px);
    background-color: #1291d4
}

.ko-progress-circle .ko-progress-circle__overlay {
    width: 105px;
    height: 105px;
    position: absolute;
    margin: 7.5px;
    background-color: #fbfbfb;
    border-radius: 50%
}

 

<div class="ko-progress-circle" data-progress="30">
    <div class="ko-circle">
        <div class="full ko-progress-circle__slice">
            <div class="ko-progress-circle__fill"></div>
        </div>
        <div class="ko-progress-circle__slice">
            <div class="ko-progress-circle__fill"></div>
            <div class="ko-progress-circle__fill ko-progress-circle__bar"></div>
        </div>
    </div>
    <div class="ko-progress-circle__overlay"></div>
</div>

 

$('.ko-progress-circle').each(function(index, element) {
    var progress = $(this).data('progress');
    var degree = parseInt(progress) * 1.8;

    $(this).find('.ko-progress-circle__slice.full,.ko-progress-circle__fill').css('transform', 'rotate(' + degree + 'deg)');
    $(this).find('.ko-progress-circle__fill.ko-progress-circle__bar').css('transform', 'rotate(' + (degree * 2) + 'deg)');
});