Spinners (n)

HTML
<div class="spinner spinner-1"></div> <div class="spinner spinner-2"></div> <div class="spinner spinner-3"></div> <div class="spinner spinner-4"></div>
SCSS
body { background: #0098ff; display: flex; flex: 1; justify-content: center; align-items: center; height: 100vh; } .spinner { width: 50px; height: 50px; margin: 20px; border-radius: 50%; border: solid 10px transparent; box-sizing: border-box; &.spinner-1 { border-top-color: white; box-shadow: 0 0 0 1px #0098ff, 0 0 0 3px white; animation: rotate infinite linear 1s; } &.spinner-2 { border-top-color: white; box-shadow: 0 0 0 1px #0098ff, inset 0 0 0 1px #0098ff, 0 0 0 3px white, inset 0 0 0 3px white; animation: rotate infinite linear 1s; } &.spinner-3 { border-top-color: white; border-bottom-color: white; box-shadow: 0 0 0 1px #0098ff, 0 0 0 3px white; animation: rotate infinite linear 1s; } &.spinner-4 { border-top-color: white; border-bottom-color: white; box-shadow: 0 0 0 1px #0098ff, inset 0 0 0 1px #0098ff, 0 0 0 3px white, inset 0 0 0 3px white; animation: rotate infinite linear 1s; } } @keyframes rotate { 100% { transform: rotate(360deg); } }
JAVASCRIPT
Expand for more options Login