圆环进度css

看效果先：http://sandbox.runjs.cn/show/b6bmksvn
参考：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .clip-wrap {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 400px;
            height:400px;
            background-color: #ffb348;
            border-radius: 50%;
        }
        .clip-wrap .left,.clip-wrap .right {
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height:100%;
            background-color: #cccccc;
            border-radius: 50%;
            -webkit-transition: all 0.5s linear;
        }
        .clip-wrap .left {
            clip: rect(0 ,200px,400px,0);
        }
        .clip-wrap .right {
            clip: rect(0 ,400px,400px,200px);
        }
        .mask {
            position: absolute;
            top:50%;
            left:50%;
            margin-left: -180px;
            margin-top: -180px;
            width:360px;
            height:360px;
            background-color: #fff;
            border-radius: 50%;
            line-height: 360px;
            text-align: center;
            font-size: 100px;
            color: #ff9f40;
        }
        .left-wrap {
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height:100%;
            clip: rect(0 ,200px,400px,0);
        }
        .right-wrap {
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height:100%;
            clip: rect(0 ,400px,400px,200px);
        }
    </style>
</head>
<body>
    <div class="clip-wrap">
        <div class="left-wrap">
            <div class="left"></div>
        </div>
        <div class="right-wrap">
            <div class="right"></div>
        </div>
        <div class="mask">
            <span class="num">0</span>%
        </div>
    </div>
    <button>0%</button>
    <button>10%</button>
    <button>30%</button>
    <button>50%</button>
    <button>80%</button>
    <button>100%</button>
</body>
<script>
    function changeView(num) {
        var deg = num * 3.6;   // 把360度分成100份
        document.querySelector('.num').textContent = num;
        if(deg<180) {
            document.querySelector('.left').style.webkitTransform = 'rotate('+(0)+'deg)';
            document.querySelector('.right').style.webkitTransform = 'rotate('+deg+'deg)';
        }else {
            document.querySelector('.right').style.webkitTransform = 'rotate('+180+'deg)';
            document.querySelector('.left').style.webkitTransform = 'rotate('+(deg-180)+'deg)';
        }
    }
    var btn = document.querySelectorAll('button');
    for(var i = 0,len = btn.length; i< len; i++) {
        (function(i) {
            btn[i].onclick = function() {
                var num = parseInt(this.textContent);

                changeView(num);
            }
        })(i)
    }
</script>
</html>
posted @ 2017-03-03 17:36 黑客PK 阅读(687) 评论(0) 编辑收藏举报
刷新页面返回顶部
黑客

圆环进度css

公告
