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