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