圆形进度条（假的无限循环）

最新推荐文章于 2021-08-03 21:12:19 发布

iteye_13166

最新推荐文章于 2021-08-03 21:12:19 发布

阅读量591

点赞数

分类专栏： web 文章标签：移动开发 java

本文链接：https://blog.csdn.net/iteye_13166/article/details/82672503

版权

web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏


<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 ;
}