<div id="outer">
<div id="load_left"><span></span></div>
<div id="load_right"><span></span></div>
<div id="inner">请耐心等待</div>
</div>
var leftRot = document.getElementById('load_left').children[0],
rightRot = document.getElementById('load_right').children[0],
showVal = document.getElementById('inner');
function rotControl(e) {
var target = e.target,
val = target.value;
console.log(val);
if (val <= 180) {
rightRot.style.transform = 'rotate(' + val + 'deg)';
leftRot.style.transform = 'rotate(0deg)';
}
if (val>180) {
leftRot.style.transform = 'rotate(' + (val - 180) + 'deg)';
rightRot.style.transform = 'rotate(180deg)';
}
if (showVal.innerText) {
showVal.innerText = Math.floor((val / 360) * 100) + '%';
}
else if (showVal.textContent) {
showVal.textContent = Math.floor((val / 360) * 100) + '%';
}
}
@-webkit-keyframes rot_left {
0%{transform: rotate(0deg);}
50%{transform: rotate(0deg);}
100%{transform: rotate(180deg);}
}
@-webkit-keyframes rot_right {
0%{transform: rotate(0deg);}
50%{transform: rotate(180deg);}
100%{transform: rotate(180deg);}
}
@keyframes rot_left {
0%{transform: rotate(0deg);}
50%{transform: rotate(0deg);}
100%{transform: rotate(180deg);}
}
@keyframes rot_right {
0%{transform: rotate(0deg);}
50%{transform: rotate(180deg);}
100%{transform: rotate(180deg);}
}
#outer {
width: 180px;
height: 180px;
margin: 0 auto;
background: rgb(173, 88, 36);
border-radius: 50%;
position: relative;
overflow: hidden;
}
#inner {
width: 150px;
height: 150px;
background: rgb(224, 151, 83);
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -75px;
margin-top: -75px;
text-align: center;
line-height: 150px;
}
#load_left, #load_right {
width: 90px;
height: 180px;
/*background: rgb(249, 199, 149);*/
position: absolute;
overflow: hidden;
}
#load_left {
top: 0;
left: 0;
border-top-left-radius: 100% 50%;
border-bottom-left-radius: 100% 50%;
transform-origin: 100% 50%;
/*-webkit-animation: rot_left 10s linear infinite;*/
}
#load_right {
top: 0;
left: 50%;
border-top-right-radius: 100% 50%;
border-bottom-right-radius: 100% 50%;
transform-origin: 0 50%;
}
#load_left span, #load_right span {
display: inline-block;
width: 90px;
height: 180px;
background: rgb(249, 199, 129);
position: absolute;
}
#load_left span {
border-top-left-radius: 100% 50%;
border-bottom-left-radius: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: rot_left 3s infinite linear ;
animation: rot_left 3s infinite linear ;
}
#load_right span {
top: 0;
right: 0%;
border-top-right-radius: 100% 50%;
border-bottom-right-radius: 100% 50%;
transform-origin: 0 50%;
-webkit-animation: rot_right 3s infinite linear ;
animation: rot_right 3s infinite linear ;
}
分享到:
相关推荐
圆形进度条 index.html圆形进度条 index.html圆形进度条 index.html圆形进度条 index.html圆形进度条 index.html圆形进度条 index.html圆形进度条 index.html圆形进度条 index.html圆形进度条 index.html
WPF实现的圆形进度条,仿安卓上常见的圆形进度条效果。中间带进度的文字显示,有需要的可以参考下
UGUI实现的圆形进度条 可用于进度条显示 也可用于拖拽验证码的功能
C# Winform圆形进度条(改良版)从csdn下载,增加了圆形进度值文字显示。GDI+绘制,效率高。
漂亮的圆形进度条,C#使用,可适用于各个netFrame版本
圆形进度条需要自定义控件来实现 ,简单来说,只需要继承View 重写 onMeasure() 和 onLayout() 方法 重新绘制即可 ,其中也用到了自定义属性。可以直接拿来使用
带进度的圆形进度条,可显示百分比。可以在统计控球率的时候使用
带进度的圆形进度条源码,可以支持多种进度条显示控制
圆形进度条,可自定义,复制即可使用,兼容性IE8以上,如有问题,及时沟通
win8 小点进度条,自定义圆形进度条,wpf Progressbar进度条样式更改
Qt案例之利用QPainter实现自定义圆形进度条,纯QPainter绘制,不包括图片,详情可参考文章:https://blog.csdn.net/didi_ya/article/details/124378255
Android 圆形进度条 讲解博客 : http://blog.csdn.net/shulianghan/article/details/40351487
用QML实现圆形进度条
Delphi 圆形进度条 源码
智能家居常见圆形进度条
圆形进度条和圆形loading源码,仅供大家学习,望大家多多支持
[VC++]圆形进度条,进行饼图来实现圆形进度条
C#winform 自定义控件实现圆形进度条和环形进度条控件,vs2017开发,可直接编译运行,用于进度显示,详细的去看博客介绍。
这是一款css3圆形进度条时分秒计时器js特效,非常简洁又漂亮的网页计时动画代码。
本程序包含三个自定义的圆形进度条progressbar 程序代码比较少,主要通过XML布局实现 主要是学习自定义的圆形进度条的用法