SCSS
html, body {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
background-color: #34495e;
display: flex;
align-items: center;
}
svg {
display: block;
margin: 0 auto;
height: 50%;
}
circle {
fill: none;
stroke-width: 6px;
stroke-linecap: round;
stroke: currentcolor;
color: #2980b9;
stroke-dasharray: 260,0,1,0,1,0,1,0,10, 1, 10, 1, 10, 1, 10, 1, 10, 10, 1, 10, 1, 10, 1, 10, 10, 1;
animation: dostuff 18s ease infinite
}
@keyframes dostuff {
50% {
stroke-dasharray: 10, 1, 10, 1, 10, 1,10,1,10,1,10,1,10,10, 10, 1, 20, 120, 1, 30, 1, 30, 1, 10, 30, 1;
stroke-opacity:.5; }
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
g {
animation: spin 20s linear infinite;
transform-origin: 50% 50%;
&:nth-child(even){animation-direction: reverse}
&:nth-child(1n) {
animation-delay: -1s;
}
&:nth-child(2n) {
animation-delay: -2s;
}
&:nth-child(3n) {
animation-delay: -3s;
}
&:nth-child(4n) {
animation-delay: -4s;
}
&:nth-child(5n) {
animation-delay: -5s;
}
&:nth-child(6n) {
animation-delay: -6s;
}
&:nth-child(7n) {
animation-delay: -7s;
}
&:nth-child(1n) circle {
animation-delay: -1.5s;
}
&:nth-child(2n) circle {
animation-delay: -2.5s;
}
&:nth-child(3n) circle {
animation-delay: -3.5s;
}
&:nth-child(4n) circle {
animation-delay: -4.5s;
}
&:nth-child(5n) circle {
animation-delay: -4.5s;
}
&:nth-child(6n) circle {
animation-delay: -5.5s;
}
&:nth-child(7n) circle {
animation-delay: -6.5s;
}
&:nth-child(8n) circle {
animation-delay: -7.5s;
}
&:nth-child(9n) circle {
animation-delay: -8.5s;
}
&:nth-child(10n) circle {
animation-delay: -9.5s;
}
&:last-child circle {
fill: #3498db;
stroke: none;
}
}
