CSS
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
overflow: hidden;
}
.spin-dr {
box-sizing: border-box;
position: relative;
width: 150px;
height: 150px;
border: 8px solid transparent;
border-radius: 50%;
animation: loader 2s linear infinite, spin 0.5s linear infinite;
filter: blur(3px) saturate(110);
}
.spin-dr::after {
content:'';
box-sizing: border-box;
position: absolute;
display: block;
top: 30%;
left: 30%;
height:40%;
width: 40%;
border: 8px solid transparent;
border-radius: 50%;
animation: loader 1.5s linear infinite, spin 0.25s linear reverse infinite;
}
@keyframes loader {
0% {border-left-color:transparent;border-right-color:#013C80}
25% {border-top-color:transparent;border-bottom-color:#016dae}
50% {border-right-color:transparent;border-left-color:#009edb}
75% {border-bottom-color:transparent;border-top-color:#016dae}
100% {border-left-color:transparent;border-right-color:#013C80}
}
@keyframes spin {
0% {transform: rotate(0deg)}
100% {transform: rotate(-360deg)}
}
