Цикл анимации загрузчика svg

Question

Мне нужна помощь в создании моего 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.}

Answer 1

Я внес несколько изменений в ваш код:

Вместо двух кругов я использую только один круг с толстой обводкой. Грубо говоря, в этом случае я анимирую обводку, а не заливку.
У вас есть путь, и вы анимируете смещение stroke-dashoffset. Проблема в том, что участки пути имеют разную длину, поэтому невозможно узнать, когда начинать анимацию кругов. Чтобы решить эту задачу я использую 5 путей, вместо одного пути и начинаю анимацию круга в конце завершения анимации каждого пути.
В этом случае вы не можете использовать animation-direction: alternate; Вместо этого я использую две объединенных анимации. Мне также нужен javascript, чтобы знать, когда заканчивается вторая анимация, чтобы я мог удалить класс svg и добавить его немного позже.

Чтобы рассчитать задержку, я использую переменные css, но вам может потребоваться использовать другую анимацию для каждого сегмента (для тех браузеров, где переменные не поддерживаются). В качестве альтернативы вы можете использовать javascript. Также я использую переменные для хранения длины каждого пути.

let svg = document.querySelector("svg");

let i = 0;

first.addEventListener(
  "animationend",
  () => {
    i++;
    if (i % 2 == 0) {
      svg.setAttribute("class", "");
    }
  },
  false
);

window.setInterval( function(){
 svg.setAttribute("class", "svg");
},15000/60);

svg {
  width: 100%;
  max-width: 500px;
}

path {
  stroke-dasharray: var(--sd);
  stroke-dashoffset: var(--sd);
  stroke:black;
}
.svg path {
  animation: draw 1s forwards calc(1.5s * var(--n)),
             draw1 1s forwards calc(1.5s * (9 - var(--n)))}

circle {
  stroke: #6085a1;
  stroke-width:30px;
  fill:white;
}
.svg circle {
  animation: a .5s  forwards calc(1.5s * var(--n) - .5s),
             b .5s  forwards calc(1.5s * (10 - var(--n))  - .5s);
 }


@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw1 {
  to {
    stroke-dashoffset: var(--sd);
  }
}

@keyframes a {
  0%   {
    stroke: #6085A1;
  }
  100% {
    stroke: #EF7B00;
  }
}

@keyframes b {
  0% {
    stroke: #EF7B00;
  }
  100%   {
    stroke: #6085A1;
  }

}

<div class="loader">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1228 408" class="svg">
        <!--<path stroke-linecap="round" stroke-width="11" stroke="black" fill="none" d="M51,244L216,71L478,339L762,50L948,238L1139,48"></path>-->
      
        <g style="--sd:239;--n:0">
        <path id="a" stroke-width="11" d="M51,244L216,71"  />
        <circle cx="51" cy="244" r="30" id="first"></circle>
        </g>
        <g style="--sd:374.79;--n:1">
        <path id="b" stroke-width="11" d="M216,71L478,339" />
        <circle cx="216" cy="71" r="30"></circle>
        </g>
        <g style="--sd:405.19;--n:2">
        <path id="c" stroke-width="11" d="M478,339L762,50" />
        <circle cx="478" cy="339" r="30"></circle>
        </g>
        <g style="--sd:264.46;--n:3">
        <path id="d" stroke-width="11" d="M762,50L948,238" />
        <circle cx="762" cy="50" r="30"></circle>
        </g>
        <g style="--sd:269.4;--n:4">
        <path id="e" stroke-width="11" d="M948,238L1139,48"  />
          <circle cx="948" cy="238" r="30"></circle>
        </g>
       <g style="--n:5">
         <circle cx="1139" cy="48" r="30"></circle>
       </g>
    </svg>
</div>

_{Свободный перевод ответа от участника @enxaneta.}

БЛОГ НА HUSL

Цикл анимации загрузчика svg

Ответы (1 шт):