前端开发简单 圆环进度条
摘要：linux环境 前端开发 网络游戏开发 前端多还是后端多 前端开发时浏览器显示日志 需要做一个canvas的圆环；旋转的时候，通过监听事件函数设置旋转结束后颜色为进度条颜色，这个解决了旋转过后的问题，自己可以调试 h……
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
近期评论