最新文章:

首页 工作简记

动态环形进度条加载代码

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

    动态环形进度条

    最终效果:

    环形进度条效果

    同款代码动态效果:
    进度 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>
二维码加载中...
本文作者:帆子      文章标题: 动态环形进度条加载代码
本文地址:http://www.hy01.cn/circular_progress.html
版权声明:若无注明,本文皆为“梁鹏程个人主页-帆子博客”原创,转载请保留文章出处。