SVG Preloader крутилка

Question

Подскажите, пожалуйста, как правильно задать анимацию, чтобы прелоадер работал правильно?

body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: linear-gradient(180deg, #0F113E 0%, #090A34 100%);
}

.preloadingBlock_el {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.preloadingBlock_el path {
  fill: #ABB7E0;
  animation: spinLine 2s linear infinite;
}

<div class="preloadingBlock_el">
  <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">

                    <path d="M27.2424 2.19697C27.2424 1.22629 28.0293 0.439392 29 0.439392V0.439392C29.9707 0.439392 30.7576 1.22629 30.7576 2.19697V11.4242C30.7576 12.3949 29.9707 13.1818 29 13.1818V13.1818C28.0293 13.1818 27.2424 12.3949 27.2424 11.4242V2.19697Z" />
                    <path d="M40.8794 4.90913C41.3647 4.06849 42.4396 3.78047 43.2803 4.26581V4.26581C44.1209 4.75115 44.4089 5.82607 43.9236 6.6667L39.31 14.6578C38.8246 15.4984 37.7497 15.7864 36.9091 15.3011V15.3011C36.0684 14.8157 35.7804 13.7408 36.2658 12.9002L40.8794 4.90913Z" />
                    <path d="M51.3333 14.0764C52.1739 13.5911 53.2489 13.8791 53.7342 14.7197V14.7197C54.2195 15.5604 53.9315 16.6353 53.0909 17.1206L45.0998 21.7343C44.2592 22.2196 43.1843 21.9316 42.6989 21.0909V21.0909C42.2136 20.2503 42.5016 19.1754 43.3423 18.6901L51.3333 14.0764Z"/>
                    <path d="M14.0764 6.6667C13.591 5.82606 13.879 4.75115 14.7197 4.2658V4.2658C15.5603 3.78046 16.6352 4.06849 17.1206 4.90912L21.7342 12.9002C22.2195 13.7408 21.9315 14.8157 21.0909 15.3011V15.3011C20.2503 15.7864 19.1753 15.4984 18.69 14.6577L14.0764 6.6667Z"/>
                    <path d="M4.90907 17.1206C4.06843 16.6353 3.78041 15.5604 4.26575 14.7197V14.7197C4.75109 13.8791 5.82601 13.5911 6.66664 14.0764L14.6577 18.69C15.4983 19.1754 15.7864 20.2503 15.301 21.0909V21.0909C14.8157 21.9316 13.7408 22.2196 12.9001 21.7342L4.90907 17.1206Z"/>
                    <path d="M2.19697 30.7576C1.22629 30.7576 0.439392 29.9707 0.439392 29V29C0.439392 28.0293 1.22629 27.2424 2.19697 27.2424L11.4242 27.2424C12.3949 27.2424 13.1818 28.0293 13.1818 29V29C13.1818 29.9707 12.3949 30.7576 11.4242 30.7576L2.19697 30.7576Z" />
                    <path d="M27.2424 46.5758C27.2424 45.6051 28.0293 44.8182 29 44.8182V44.8182C29.9707 44.8182 30.7576 45.6051 30.7576 46.5758V55.803C30.7576 56.7737 29.9707 57.5606 29 57.5606V57.5606C28.0293 57.5606 27.2424 56.7737 27.2424 55.803V46.5758Z" />
                    <path d="M18.69 43.3423C19.1753 42.5017 20.2503 42.2136 21.0909 42.699V42.699C21.9315 43.1843 22.2196 44.2592 21.7342 45.0999L17.1206 53.0909C16.6352 53.9316 15.5603 54.2196 14.7197 53.7342V53.7342C13.879 53.2489 13.591 52.174 14.0764 51.3333L18.69 43.3423Z" />
                    <path d="M12.9001 36.2658C13.7408 35.7805 14.8157 36.0685 15.301 36.9091V36.9091C15.7864 37.7498 15.4983 38.8247 14.6577 39.31L6.66666 43.9237C5.82602 44.409 4.75111 44.121 4.26577 43.2803V43.2803C3.78043 42.4397 4.06845 41.3648 4.90908 40.8794L12.9001 36.2658Z" />
                    <path d="M36.2658 45.0999C35.7804 44.2592 36.0684 43.1843 36.9091 42.699V42.699C37.7497 42.2136 38.8246 42.5017 39.31 43.3423L43.9236 51.3333C44.4089 52.174 44.1209 53.2489 43.2803 53.7342V53.7342C42.4396 54.2196 41.3647 53.9316 40.8794 53.0909L36.2658 45.0999Z" />
                    <path d="M43.3422 39.31C42.5016 38.8247 42.2136 37.7497 42.6989 36.9091V36.9091C43.1843 36.0685 44.2592 35.7804 45.0998 36.2658L53.0909 40.8794C53.9315 41.3648 54.2195 42.4397 53.7342 43.2803V43.2803C53.2488 44.121 52.1739 44.409 51.3333 43.9236L43.3422 39.31Z" />
                    <path d="M46.5758 30.7576C45.6051 30.7576 44.8182 29.9707 44.8182 29V29C44.8182 28.0293 45.6051 27.2424 46.5758 27.2424L55.803 27.2424C56.7737 27.2424 57.5606 28.0293 57.5606 29V29C57.5606 29.9707 56.7737 30.7576 55.803 30.7576L46.5758 30.7576Z" />

            </svg>
</div>

Необходимо, чтобы за одинаковое время, каждый из элементов path задавался белым цветом.
Как правильно выставить задержку?

Answer 1

body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: linear-gradient(180deg, #0F113E 0%, #090A34 100%);
}

.preloadingBlock_el {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.preloadingBlock_el path {
  fill: #ABB7E0;
}
.preloadingBlock_el path:first-child{
  fill: #ffffff;
}
.preloadingBlock_el svg{
  animation: rotate 6s steps(12, end) infinite;
}

@keyframes rotate{
 from {
    transform: rotate(0deg);
 }
  to {
    transform: rotate(360deg);  
 }
}

<div class="preloadingBlock_el">
  <svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">

                    <path d="M27.2424 2.19697C27.2424 1.22629 28.0293 0.439392 29 0.439392V0.439392C29.9707 0.439392 30.7576 1.22629 30.7576 2.19697V11.4242C30.7576 12.3949 29.9707 13.1818 29 13.1818V13.1818C28.0293 13.1818 27.2424 12.3949 27.2424 11.4242V2.19697Z" />
                    <path d="M40.8794 4.90913C41.3647 4.06849 42.4396 3.78047 43.2803 4.26581V4.26581C44.1209 4.75115 44.4089 5.82607 43.9236 6.6667L39.31 14.6578C38.8246 15.4984 37.7497 15.7864 36.9091 15.3011V15.3011C36.0684 14.8157 35.7804 13.7408 36.2658 12.9002L40.8794 4.90913Z" />
                    <path d="M51.3333 14.0764C52.1739 13.5911 53.2489 13.8791 53.7342 14.7197V14.7197C54.2195 15.5604 53.9315 16.6353 53.0909 17.1206L45.0998 21.7343C44.2592 22.2196 43.1843 21.9316 42.6989 21.0909V21.0909C42.2136 20.2503 42.5016 19.1754 43.3423 18.6901L51.3333 14.0764Z"/>
                    <path d="M14.0764 6.6667C13.591 5.82606 13.879 4.75115 14.7197 4.2658V4.2658C15.5603 3.78046 16.6352 4.06849 17.1206 4.90912L21.7342 12.9002C22.2195 13.7408 21.9315 14.8157 21.0909 15.3011V15.3011C20.2503 15.7864 19.1753 15.4984 18.69 14.6577L14.0764 6.6667Z"/>
                    <path d="M4.90907 17.1206C4.06843 16.6353 3.78041 15.5604 4.26575 14.7197V14.7197C4.75109 13.8791 5.82601 13.5911 6.66664 14.0764L14.6577 18.69C15.4983 19.1754 15.7864 20.2503 15.301 21.0909V21.0909C14.8157 21.9316 13.7408 22.2196 12.9001 21.7342L4.90907 17.1206Z"/>
                    <path d="M2.19697 30.7576C1.22629 30.7576 0.439392 29.9707 0.439392 29V29C0.439392 28.0293 1.22629 27.2424 2.19697 27.2424L11.4242 27.2424C12.3949 27.2424 13.1818 28.0293 13.1818 29V29C13.1818 29.9707 12.3949 30.7576 11.4242 30.7576L2.19697 30.7576Z" />
                    <path d="M27.2424 46.5758C27.2424 45.6051 28.0293 44.8182 29 44.8182V44.8182C29.9707 44.8182 30.7576 45.6051 30.7576 46.5758V55.803C30.7576 56.7737 29.9707 57.5606 29 57.5606V57.5606C28.0293 57.5606 27.2424 56.7737 27.2424 55.803V46.5758Z" />
                    <path d="M18.69 43.3423C19.1753 42.5017 20.2503 42.2136 21.0909 42.699V42.699C21.9315 43.1843 22.2196 44.2592 21.7342 45.0999L17.1206 53.0909C16.6352 53.9316 15.5603 54.2196 14.7197 53.7342V53.7342C13.879 53.2489 13.591 52.174 14.0764 51.3333L18.69 43.3423Z" />
                    <path d="M12.9001 36.2658C13.7408 35.7805 14.8157 36.0685 15.301 36.9091V36.9091C15.7864 37.7498 15.4983 38.8247 14.6577 39.31L6.66666 43.9237C5.82602 44.409 4.75111 44.121 4.26577 43.2803V43.2803C3.78043 42.4397 4.06845 41.3648 4.90908 40.8794L12.9001 36.2658Z" />
                    <path d="M36.2658 45.0999C35.7804 44.2592 36.0684 43.1843 36.9091 42.699V42.699C37.7497 42.2136 38.8246 42.5017 39.31 43.3423L43.9236 51.3333C44.4089 52.174 44.1209 53.2489 43.2803 53.7342V53.7342C42.4396 54.2196 41.3647 53.9316 40.8794 53.0909L36.2658 45.0999Z" />
                    <path d="M43.3422 39.31C42.5016 38.8247 42.2136 37.7497 42.6989 36.9091V36.9091C43.1843 36.0685 44.2592 35.7804 45.0998 36.2658L53.0909 40.8794C53.9315 41.3648 54.2195 42.4397 53.7342 43.2803V43.2803C53.2488 44.121 52.1739 44.409 51.3333 43.9236L43.3422 39.31Z" />
                    <path d="M46.5758 30.7576C45.6051 30.7576 44.8182 29.9707 44.8182 29V29C44.8182 28.0293 45.6051 27.2424 46.5758 27.2424L55.803 27.2424C56.7737 27.2424 57.5606 28.0293 57.5606 29V29C57.5606 29.9707 56.7737 30.7576 55.803 30.7576L46.5758 30.7576Z" />

            </svg>
</div>

Answer 2

Вариант SVG анимации

Полезной особенностью этого решения является то, что нет необходимости прорисовывать path для каждой полоски. И если возникнет необходимость сделать прелоадер с другим количеством полосок, то нужно будет просто поменять параметры в stroke-dasharray

Решение основано на анимации stroke-dashoffset
stroke-dasharray разбивает круг на 12 необходимых для прелоадера полосок.

Расчёт параметров

Нижняя окружность, поделенная на 12 сегментов

При радиусе 25px длина окружности равна - 2 * 3.14 * 25 = 157px
Один сегмент равен 157 / 12 = 13.08 или 3 + 10.08
stroke-dasharray = 3 10.08, где 3px длина черты, 10.08px пробел

Анимация бегущего сегмента верхней окружности, достигается с помощью изменения
stroke-dashoffset (отступа от начала линии) равному длине одного сегмента

body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: linear-gradient(180deg, #444444 0%, #090A34 100%);
}

.preloadingBlock_el {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

<div class="preloadingBlock_el">
<svg width="65" height="65" viewBox="0 0 65 65"  xmlns="http://www.w3.org/2000/svg">
   <!-- Нижний круг с чёрточками -->
<circle cx="32" cy="32" r="25" style="stroke:#ABB7E0; fill:none;  stroke-width:15;
 stroke-dasharray:3 10.08;" /> 
   <!-- Верхний круг с одной видимой полоской -->
 <circle transform="rotate(-90 32 32)" cx="32" cy="32" r="25" style="stroke:#ffffff; fill:none;  stroke-width:15; stroke-dasharray:3 154; stroke-dashoffset: 157" >
       <!-- Анимация бегущей полоски -->
 <animate attributeName="stroke-dashoffset" values="0;143.92;130.84;117.76;104.68;91.6;78.52;65.44;52.36;39.28;26.22;13.14;0" dur="3s" repeatCount="indefinite" calcMode="discrete"/> 
  </circle> 

   </svg>  
 </div>

БЛОГ НА HUSL

SVG Preloader крутилка

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

Вариант SVG анимации