首页 工作简记

动态环形进度条加载代码

发布时间:2024年06月28日 评论数：抢沙发 阅读数：353

动态环形进度条

最终效果：



同款代码动态效果：
进度 0%

<div class="circle">
    <div class="circle_left ab"></div>
    <div class="circle_right ab"></div>
    <div class="circle_text">
        <span class="name">进度</span>
        <span class="value">0%</span>
    </div>
</div>

<script>
    function renderRightRate(rate) {
        if (rate < 50) { return 'transform: rotate(' + 3.6 * rate + 'deg);';}
        else { return 'transform: rotate(0);border-color: #54c4fd;';}
    }
    function renderLeftRate(rate) {
        if (rate >= 50) { return 'transform: rotate(' + 3.6 * (rate - 50) + 'deg);';}
    }
    let left    = document.getElementsByClassName('circle_left');
    let right   = document.getElementsByClassName('circle_right');
    let value   = document.getElementsByClassName('value');

    // 模拟进度值rate
    let rate    = 0;
    let vi      = setInterval(function (e) {
        if (rate >= 100) { clearInterval(vi); }
        // 动态改变进度值---------------------------
        left[0].style.cssText   = renderLeftRate(rate);
        right[0].style.cssText  = renderRightRate(rate);
        value[0].innerHTML = rate + '%';
        // ---------------------------
        rate += 1;
    }, 100)
</script>
<style>
    .circle {
        width: 56px;
        height: 56px;
        position: relative;
        border-radius: 50%;
        box-shadow: inset 0 0 0 5px #54c4fd;
        box-sizing: border-box;
    }

    .circle_left,.circle_right{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        border: 5px solid #546063;
        border-radius: 50%;
        box-sizing: border-box;
    }
    .circle_left {
        /* clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); */
        clip-path: inset(0 50% 0 0);
    }
    .circle_right {
        /* clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); */
        clip-path: inset(0 0 0 50%);
    }

    .circle_text {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #666;
        box-sizing: border-box;
        font-size: 12px;
    }
</style>




第二种，使用canvas更丝滑！

效果：




<div id="progress">
    <canvas id="progressCanvas" width="120" height="120"></canvas>
    <div id="progressValue"></div>
</div>
<script>
    function drawCircle(obj, percentage, color) {
        var width   = obj.width;
        var height  = obj.height;
        var radius  = parseInt(width/2.20);
        var position    = width;
        var positionBy2 = position/2;
        var ctx     = obj.getContext('2d');
        var imd     = null;
        var circ    = Math.PI * 2;
        var quart   = Math.PI / 2;
        ctx.clearRect(0, 0, width, height);
        ctx.beginPath();
        ctx.strokeStyle = color;
        ctx.lineCap = 'square';
        ctx.closePath();
        ctx.fill();
        ctx.lineWidth = 5;
        imd = ctx.getImageData(0, 0, position, position);
        var draw = function(current, ctxPass) {
            ctxPass.putImageData(imd, 0, 0);
            ctxPass.beginPath();
            ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);
            ctxPass.stroke();
        }
        draw(percentage / 100, ctx);
    }
    window.onload   = function(){
        // 模拟进度值rate
        let showPre     = document.getElementById('progressValue');
        let preCanvas   = document.getElementById('progressCanvas');
        preCanvas.parentElement.style.cssText = 'width:' + preCanvas.width + 'px;height:' + preCanvas.height + 'px;';
        let percentage  = 0;
        let pvi = setInterval(function (e) {
            percentage += 1;
            if (percentage >= 100) { clearInterval(pvi); }
            // 动态改变进度值---------------------------
            showPre.dataset.percent = percentage;
            drawCircle(preCanvas, percentage, '#54c4fd');
            // ---------------------------
        }, 10)
    }
</script>
<style>
    #progress {
        z-index: 9999;
        border-radius: 100%;
        position: relative;
        transition: 0.5s;
        -webkit-transition: 0.5s
    }
    #progressValue {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #666;
    }
    #progressValue:before {
        font-family: iconfont, fatesinger;
        content: attr(data-percent)'%'
    }
</style>