T R O N - Spinner

HTML
<div class="spinner"></div>
SCSS
@import "compass/css3"; $spinner-size: 400px; $spinner-thickness: 6px; $spinner-speed: 1.2s; $spinner-3d: true; $spinner-loops: infinite; .spinner { position: relative; margin: auto; box-sizing: border-box; background-clip: padding-box; width: $spinner-size; height: $spinner-size; border-radius: $spinner-size / 2; border: $spinner-thickness solid hsla(0,0%,100%,.1); @if ($spinner-3d) { // mask smoothens out the anti-aliasing artifacts in the back. -webkit-mask: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,0%,1) 90% ); transform-origin: 50% 60%; transform: perspective($spinner-size) rotateX(66deg); animation: spinner-wiggle $spinner-speed $spinner-loops; } } @keyframes spinner-wiggle { 30% { transform: perspective($spinner-size) rotateX(66deg); } 40% { transform: perspective($spinner-size) rotateX(65deg); } 50% { transform: perspective($spinner-size) rotateX(68deg); } 60% { transform: perspective($spinner-size) rotateX(64deg); } } .spinner:before, .spinner:after { content: ""; position: absolute; margin: -$spinner-thickness; box-sizing: inherit; width: inherit; height: inherit; border-radius: inherit; opacity: .05; border: inherit; border-color: transparent; animation: spinner-spin $spinner-speed cubic-bezier(.6,.2,0,.8) $spinner-loops, spinner-fade $spinner-speed linear $spinner-loops; } .spinner:before { border-top-color: hsl(190,100%,70%); } .spinner:after { border-top-color: hsl(50,80%,70%); animation-delay: $spinner-speed * 0.25; } @keyframes spinner-spin { 100% { transform: rotate(360deg); } } @keyframes spinner-fade { 20% { opacity: .1; } 40% { opacity: 1; } 60% { opacity: .1; } } body { display: flex; padding: 50px; box-sizing: border-box; background: radial-gradient( hsl(200,40%,20%), hsl(200,30%,6%) ); } html, body { height: 100%; }
JAVASCRIPT
Expand for more options Login