SCSS
$svg-radius: 50;
$stroke-width: 4;
$radius: $svg-radius - $stroke-width / 2;
$diameter: $radius * 2;
$pi: 3.14159265359;
$circumference: $pi * $diameter;
$revolution: 2000ms;
$color-steps: 4;
body {
background: #444;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
}
.svg {
margin-top: 25%;
display: block;
animation: svg-rotate $revolution * $color-steps linear infinite;
}
circle {
fill: transparent;
stroke: #c0392b;
stroke-width: $stroke-width;
stroke-linecap: round;
stroke-dasharray: 0, $circumference;
animation:
stroke-dash $revolution linear infinite,
stroke-width $revolution linear infinite,
stroke-color $revolution * $color-steps steps($color-steps) infinite;
}
@keyframes svg-rotate {
to { transform: rotate(360deg); }
}
@keyframes stroke-width {
0%, 100% { stroke-width: 0; }
45%, 55% { stroke-width: $stroke-width / 2; }
50% { stroke-width: $stroke-width; }
}
@keyframes stroke-dash {
0% {
stroke-dasharray: 0, $circumference;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: $circumference, 0;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: $circumference, $circumference;
stroke-dashoffset: -$circumference;
}
}
@keyframes stroke-color {
from { stroke: #e74c3c; }
}
