主页 前端技术区 Css圆环进度条代码收藏
狄默默斯基
发表于2021-04-30 08:56:53    只看楼主 楼主
头衔:  精益求精
注册时间: 2014-02-09
用户组: 日常管理组
发帖数:  578
金币数:  310
短消息
相当惊艳~~~~~相当惊艳~~~~~相当惊艳~~~~~相当惊艳~~~~~
[img=https://image-static.segmentfault.com/379/538/3795389653-5cb5352fe7f41_fix732][/img]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Circle Percent</title>
    <style type="text/css">
    body {background-color:#000;}
    .box {position:relative;margin:100px;width:256px;height:256px;border-radius:150px;box-shadow:0 0 2px 0 #6EE2CB;overflow:hidden;}
    .box .layer {position:absolute;top:50%;left:50%;border-radius:50%;overflow:hidden;transform:translate(-50%, -50%);}
    .box .layer-pie .pie {position:absolute;bottom:50%;left:50%;width:50%;height:50%;
        box-sizing:border-box;
        -webkit-transform-origin: left bottom;
        -moz-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        -o-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: skewY(-82deg);
        -moz-transform: skewY(-82deg);
        -ms-transform: skewY(-82deg);
        -o-transform: skewY(-82deg);
        transform: skewY(-82deg);
    }
    .box .layer-pie-9 {width:98%;height:98%;background-color:#000;}
    .box .layer-pie-9  .pie {border:2px solid #000;background-color:#6EE2CB;}

    .box .layer-over-9 {width:96%;height:96%;background-color:#000;}

    .box .layer-pie-45 {width:94%;height:94%;background-color:#000;}
    .box .layer-pie-45 .pie {border:1px solid #000;background-color:#000;}

    .box .layer-over-45 {width:63%;height:63%;background-color:#000;}

    .box .layer-label {width:60%;height:60%;box-shadow:0 0 0 1px #6EE2CB;background-color:#000;}
    .box .layer-label .label {position:absolute;top:50%;left:50%;color:#FFF;text-align:center;font-size:48px;transform:translate(-50%, -50%);}
    </style>
    <script>
    document.addEventListener('DOMContentLoaded', function(){
        let domBox = document.querySelector('.box');

        let i, cntPie, degPie;
        let domLayerPie, dom;

        domLayerPie = document.querySelector('.layer-pie-9');
        cntPie = 9;
        degPie = 360 / cntPie;
        for(i=0; i<cntPie; i++)
        {
            dom = document.createElement('DIV');
            dom.className = 'pie pie-'+cntPie;
            dom.style.transform = 'rotate('+(i*degPie)+'deg) skewY('+(degPie - 90)+'deg)';

            domLayerPie.appendChild(dom);
        }

        domLayerPie = document.querySelector('.layer-pie-45');
        cntPie = 45;
        degPie = 360 / cntPie;
        for(i=0; i<cntPie; i++)
        {
            dom = document.createElement('DIV');
            dom.className = 'pie pie-'+cntPie;
            dom.style.transform = 'rotate('+(i*degPie)+'deg) skewY('+(degPie - 90)+'deg)';

            domLayerPie.appendChild(dom);
        }

        domLayerPie = document.querySelector('.box .layer-pie-45');
        let arrDomPie = Array.prototype.slice.call(domLayerPie.querySelectorAll('.pie'));
        let domLabel = document.querySelector('.box .layer-label .label');

        function render($percent)
        {
            let cntPie = 45;
            let idxMax = Math.floor(cntPie * $percent / 100);

            let i, alpha;
            let dom;
            for(i=0; i<arrDomPie.length; i++)
            {
                if(i === 0 && idxMax === 0)
                    alpha = 1;
                else if(i < idxMax)
                    alpha = i / (idxMax - 1);
                else
                    alpha = 0;

                dom = arrDomPie[i];
                dom.style.backgroundColor = 'rgba(1,235,238,'+alpha+')';
            }

            domLabel.innerHTML = $percent + '%';
        }

        function run($percent)
        {
            render($percent);

            $percent = $percent + 1;
            if($percent > 100)
                $percent = 0;

            setTimeout(function(){
                run($percent);
            },50);
        }

        run(0);
    });
    </script>
</head>
<body>
<div class="box">
    <div class="layer layer-pie layer-pie-9"></div>
    <div class="layer layer-over-9"></div>
    <div class="layer layer-pie layer-pie-45"></div>
    <div class="layer layer-over-45"></div>
    <div class="layer layer-label">
        <div class="label"></div>
    </div>
</div>
</body>
</html>
引用回复  你好陌生人 ~ 千万别说爱 ~ 让我保持等的姿势继续期待

回复人
回复内容

Powered BY YouYaX
个人自主开发论坛,从2010年10月份开发至今!

操作管理