jQuery圓形滾動進度條動態加載loading效果

2017年12月13日

可以隨時停止進度，需要計算時間清除定時器

.loading .wrap,
.loading .circle,
.loading .percent {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.loading .wrap {
    top: 150px;
    left: 50%;
    margin-left: -100px;
    background-color: #ccc;
}

.loading .circle {
    box-sizing: border-box;
    border: 10px solid #ccc;
    clip: rect(0, 200px, 200px, 100px);
}

.loading .clip-auto {
    clip: rect(auto, auto, auto, auto);
}

.loading .percent {
    box-sizing: border-box;
    top: -10px;
    left: -10px;
}

.loading .left {
    transition: transform ease;
    border: 10px solid #51abe5;
    clip: rect(0, 100px, 200px, 0);
}

.loading .right {
    border: 10px solid #51abe5;
    clip: rect(0, 200px, 200px, 100px);
}

.loading .nothing {
    width: 0;
}

.loading .num {
    z-index: 1;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 180px;
    height: 180px;
    color: #fff;
    line-height: 180px;
    text-align: center;
    font-size: 40px;
    border-radius: 50%;
    /*background-color: #fff;*/
    background: #2b9cdb;
    box-sizing: border-box;
}

<div class="wrap">
    <div class="circle">
        <div class="percent left"></div>
        <div class="percent right nothing"></div>
    </div>
    <div class="num"><span class="export">0</span>%</div>
</div>

var percent = 0; //初始化百分比
var rcent = 100; //需要顯示的百分比
var loading = setInterval(function() {
    if(percent > 100) {
        percent = 0;
        $('.circle').removeClass('clip-auto');
        $('.right').addClass('nothing');
    } else if(percent > 50) {
        $('.circle').addClass('clip-auto');
        $('.right').removeClass('nothing');
    }
    $('.left').css("-webkit-transform", "rotate(" + (18 / 5) * percent + "deg)");
    $('.export').text(percent);
    if(percent == rcent) {
        //加載完成
        clearInterval(loading);
    } else {
        percent++;
    }
}, 50);