找回密码
当前位置：前端开发者 > HTML > 正文

前端开发简单 圆环进度条

2018-08-27 23:14:26 分类：HTML 阅读(174) 评论(0)

linux环境 前端开发 网络游戏开发 前端多还是后端多 前端开发时浏览器显示日志

需要做一个canvas的圆环；旋转的时候，通过监听事件函数设置旋转结束后颜色为进度条颜色，这个解决了旋转过后的问题，自己可以调试

html 代码

<!DOCTYPE html>
<html lang=”zh”>
<head>
    <meta charset=”UTF-8″ />
    <meta content=”css3圆环加载” />
    <title>css3圆环加载</title>
    <style type=”text/css”>
        .container {
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
        .circleleft {
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            border-width: 10px;
            border-style: solid;
            border-color: orange;
            position: absolute;
            clip: rect(0, 60px, 120px, 0);
            -webkit-animation: run 10s linear;
            -moz-animation: run 10s linear;
            animation: run 10s linear;
            -webkit-animation-delay: 10s;
            -moz-animation-delay: 10s;
            animation-delay: 10s;
        }
        .circleright {
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            border-width: 10px;
            border-style: solid;
            border-color: orange;
            position: absolute;
            clip: rect(0, 120px, 120px, 60px);
            -webkit-animation: run 10s linear;
            -moz-animation: run 10s linear;
            animation: run 10s linear;
        }
        @keyframes run {
            from {
                transform: rotate(0deg)
            }
            to {
                transform: rotate(180deg)
            }
        }
        @-webkit-keyframes run {
            from {
                transform: rotate(0deg)
            }
            to {
                transform: rotate(180deg)
            }
        }
        @-moz-keyframes run {
            from {
                transform: rotate(0deg)
            }
            to {
                transform: rotate(180deg)
            }
        }
        #loadbg {
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            border: 10px solid #eee;
        }
        #loadbg span {
            display: inline-block;
            position: relative;
            top: 0%;
            left: 22%;
            border-radius: 50%;
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 1px;
            color: #fff;
            margin-left: -22px;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background: #8cc;
        }
        #loadbg i {
            font-style: normal;
        }
    </style>
</head>
<body>
    <div class=”container”>
        <div class=”holdleft”>
            <div class=”circleleft” id=’circleleft’></div>
        </div>
        <div class=”holdright”>
            <div class=”circleright” id=’circleright’></div>
        </div>
        <div id=”loadbg”><span><i id=’progress’>0</i>%</span></div>
    </div>
    <script type=”text/javascript”>
        var circleleft = $(‘circleleft’), circleright = $(‘circleright’);
        //console.log(circleleft);
        circleright.addEventListener(‘animationend’, function () { circleright.style.borderColor = ‘#eee’; }, false);
        circleright.addEventListener(‘webkitAnimationEnd’, function () { circleright.style.borderColor = ‘#eee’; }, false);
        circleright.addEventListener(‘oAnimationEnd’, function () { circleright.style.borderColor = ‘#eee’; }, false);
        circleleft.addEventListener(‘animationend’, function () { circleleft.className = ”; }, false);
        circleleft.addEventListener(‘webkitAnimationEnd’, function () { circleleft.className = ”; }, false);
        circleleft.addEventListener(‘oAnimationEnd’, function () { circleleft.className = ”; }, false);
        var progress = $(‘progress’);
        window.onload = function () {
            complete(progress);
        }
        function complete(elem) {
            var i = 1;
            var inter = setInterval(function () {
                elem.innerHTML = i;
                i++;
                if (i > 100) {
                    clearInterval(inter);
                }
            }, 200)
        }
        function $(id) {
            return (!id) ? null : document.getElementById(id);
        }
    </script>
</body>
</html>

猜数字小游戏前端开发 前端开发用哪个浏览器 web前端开发最佳实践百度云

» 本文来自：前端开发者 » 《前端开发简单 圆环进度条》
» 本文链接地址：https://www.rokub.com/5412.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论