Inner Spinner #2

HTML
<spinner> <div class="spinner"> <div class="color1 half left"></div> <div class="color2 half right"></div> <div class="color1 inner-circle top"></div> <div class="color2 inner-circle bottom"></div> </div> </spinner>
CSS
body { background: #2c3e50; position: relative; width: 50vh; height: 50vh; transform: translate(calc(50vw - 25vh),25vh); } @media (max-width: 100vh) { body { width: 50vw; height: 50vw; transform: translate(25vw,calc(50vh - 25vw)); } } spinner .color1 { background: #333; } spinner .color2 { background: #2980b9; } spinner { display: block; width: 100%; padding-bottom: 100%; border-radius: 50%; transform: scale(1); overflow: hidden; border: 8px solid #333; } spinner .spinner { position: absolute; height: calc(100% + 2px); width: calc(100% + 2px); left: -1px; top: -1px; animation: spinner-rotation .5s infinite linear; } spinner .inner-circle { position: absolute; height: 100%; width: 100%; left: 0; top: 0; border-radius: 50%; animation: spinner-inner-circle-size 1.6s infinite cubic-bezier(.75,.2,.25,.8); } spinner .inner-circle.top { animation-direction: alternate-reverse; transform-origin: 50% 0%; } spinner .inner-circle.bottom { animation-direction: alternate; transform-origin: 50% 100%; } spinner .half { height: 100%; width: 50%; position: absolute; } spinner .half.right{ right: 0; } @keyframes spinner-inner-circle-size { 0% { transform: scale(0); } 20% { transform: scale(0); } 80% { transform: scale(1); } 100% { transform: scale(1); } } @keyframes spinner-rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
JAVASCRIPT
Expand for more options Login