纯CSS实现环形进度条

2021-04-05 23:02:46 阅读：201 来源： 互联网

标签：进度条 solid 环形 height width 20px border CSS 200px

创建两块带有overflow: hidden属性的div，拼凑成一个正方形
合理利用border的上右（或下左）边框和transform的旋转属性，基于两个div实现一个环形边框
两个环形边框各旋转180°，可以将环形边框全部隐藏
基于你的需求，动态旋转一个或两个div，可以实现进度条的效果

代码如下

<html>
    <body>
        <div style="margin-bottom: 20px">
            <input id="progress" type="number" />
            <button onclick="set()">设置进度</button>
        </div>
        <div class="wrap">
            <div class="left">
                <div class="progress" id="l"></div>
            </div>
            <div class="right">
                <div class="progress" id="r"></div>
            </div>
        </div>
    </body>
    <script>
        function set() {
            let p = document.getElementById('progress').value;
            if (p > 100 || p < 0) {
                alert('进度需为0~100！');
                return;
            }
            if (p <= 50) {
                document.getElementById('r').style.transform = `rotate(${-135 + (p * 18) / 5}deg)`;
            } else {
                document.getElementById('r').style.transform = 'rotate(45deg)';
                document.getElementById('l').style.transform = `rotate(${-135 + ((p - 50) * 18) / 5}deg)`;
            }
        }
    </script>
    <style>
        .wrap {
            display: flex;
            position: relative;
            width: 200px;
            height: 200px;
        }
        .left {
            position: relative;
            left: 0;
            width: 100px;
            height: inherit;
            overflow: hidden;
        }
        .right {
            position: relative;
            right: 0;
            width: 100px;
            height: inherit;
            overflow: hidden;
        }
        .left .progress {
            width: 200px;
            height: 200px;
            border: solid 20px transparent;
            border-bottom: solid 20px aqua;
            border-left: solid 20px aqua;
            border-radius: 50%;
            box-sizing: border-box;
            transform: rotate(-135deg);
        }
        .right .progress {
            position: relative;
            left: -100px;
            width: 200px;
            height: 200px;
            border: solid 20px transparent;
            border-top: solid 20px aqua;
            border-right: solid 20px aqua;
            border-radius: 50%;
            box-sizing: border-box;
            transform: rotate(-135deg);
        }
    </style>
</html>

标签：进度条,solid,环形,height,width,20px,border,CSS,200px
来源： https://www.cnblogs.com/chh1995/p/14619827.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

纯CSS实现环形进度条