Мне нужна помощь в создании моего SVG loader. У меня есть такая анимация, см. ниже.
Когда начинается анимация, каждый кружок становится оранжевым.
Когда он закончится, линия начнет двигаться назад (это нормально), но каждый кружок также должен стать синим.
И он также должен воспроизводиться в цикле.
Вы можете мне помочь?
svg {
width: 100%;
max-width: 500px;
}
path {
stroke-dasharray: 2530;
stroke-dashoffset: 2530;
animation: draw 1.5s linear infinite alternate;
}
.circle-big {
fill: #6085A1;
}
.circle-small {
fill: #fff;
}
#circle-1-big {
animation: changeColor;
animation-duration: 100ms;
animation-fill-mode: forwards;
animation-delay: 0ms;
}
#circle-2-big {
animation: changeColor;
animation-duration: 100ms;
animation-fill-mode: forwards;
animation-delay: 100ms;
}
#circle-3-big {
animation: changeColor;
animation-duration: 100ms;
animation-fill-mode: forwards;
animation-delay: 350ms;
}
#circle-4-big {
animation: changeColor;
animation-duration: 100ms, 100ms;
animation-fill-mode: forwards;
animation-delay: 650ms;
}
#circle-5-big {
animation: changeColor;
animation-duration: 100ms, 100ms;
animation-fill-mode: forwards;
animation-delay: 800ms;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes changeColor {
0% {
fill: #6085A1;
}
100% {
fill: #EF7B00;
}
}
<div class="loader">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1228 408">
<g>
<path stroke-linecap="round" stroke-width="11" stroke="black" fill="none" d="M51,244L216,71L478,339L762,50L948,238L1139,48"></path>
<circle class="circle-big" id="circle-1-big" cx="51" cy="244" r="39"></circle><circle class="circle-small" id="circle-1-small" cx="51" cy="244" r="14"></circle>
<circle class="circle-big" id="circle-2-big" cx="216" cy="71" r="39"></circle><circle class="circle-small" id="circle-2-small" cx="216" cy="71" r="14"></circle>
<circle class="circle-big" id="circle-3-big" cx="478" cy="339" r="39"></circle><circle class="circle-small" id="circle-3-small" cx="478" cy="339" r="14"></circle>
<circle class="circle-big" id="circle-4-big" cx="762" cy="50" r="39"></circle><circle class="circle-small" id="circle-4-small" cx="762" cy="50" r="14"></circle>
<circle class="circle-big" id="circle-5-big" cx="1139" cy="48" r="39"></circle><circle class="circle-small" id="circle-5-small" cx="1139" cy="48" r="14"></circle>
</g>
</svg>
</div>
Свободный перевод вопроса svg loader animation loop от участника @Marek.