Как анимировать пунктирний круг svg? Эффект лоадера

Question

<svg width="313" height="311" viewBox="0 0 313 311" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M282.54 185.765C299.363 116.6 256.57 46.98 186.96 30.265C117.35 13.5501 47.2822 56.0695 30.4597 125.235C13.6373 194.4 56.4302 264.02 126.04 280.735C195.65 297.45 265.718 254.93 282.54 185.765Z" stroke="url(#paint0_angular_701_334)" stroke-width="18" stroke-miterlimit="10" stroke-dasharray="7.73 7.73"/>
  <path d="M157.5 257.345C213.557 257.345 259 211.97 259 155.997C259 100.024 213.557 54.6484 157.5 54.6484C101.443 54.6484 56 100.024 56 155.997C56 211.97 101.443 257.345 157.5 257.345Z" stroke="#353535" stroke-width="5.67779" stroke-miterlimit="10"/>
  <defs>
    <radialGradient id="paint0_angular_701_334" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(156.5 155.5) rotate(72.1923) scale(134.064 133.263)">
      <stop stop-color="white"/>
      <stop offset="0.0001" stop-color="#929999"/>
      <stop offset="0.618755" stop-color="#929999"/>
      <stop offset="0.620474" stop-color="#40FED4"/>
      <stop offset="0.719982" stop-color="#1894EF"/>
      <stop offset="0.852185" stop-color="#20A9EA"/>
      <stop offset="1" stop-color="#40FED4"/>
    </radialGradient>
  </defs>
</svg>

Answer 1

Вариант на чистом CSS с использованием conic-gradient() и mask:

/* For example only --> */ body{margin:0;min-height:100vh;background-color:#111;background-image:url("https://i.stack.imgur.com/m9NKc.png"),radial-gradient(#fff8,#000f);background-position:0 0;background-repeat:no-repeat;background-size:auto;display:flex;flex-flow:column nowrap;justify-content:space-around;align-items:center;gap:1em}

.loader {
  font-size: min(2vw, 2vh); /* <-- Масштаб */
  width: 39.5em; height: 39.5em;
  border-radius: 50%;
  background-image: radial-gradient( #0000 0 14.1em, #353535 14.2em 14.9em, #0000 15em);
  overflow: hidden;
}

.sectors {
  position: relative;
  height: 100%;
  -webkit-mask-image: repeating-conic-gradient( #000 0deg 3.061538461538462deg, #0000 3.461538461538462deg 6.923076923076923deg);
}
.sectors::before {
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  background-image: conic-gradient( #3df6d6 0deg, #1ca0ec 42deg 82deg, #3df6d6 122deg, #0000 122deg), radial-gradient(#0000 0 17.1em, #929999 17.2em);
  -webkit-mask-image: radial-gradient(#0000 0 17.1em, #ffaa00 17.2em);
  animation: spin 2s steps(52, end) infinite;
}

@keyframes spin { 100% { transform: rotate(1turn); } }

<div class="loader"><div class="sectors"></div></div>

Хочу заметить, что здесь более уместна метка css3, так как даже при реализации на SVG, не обойтись без conic-gradient(), который появился именно в CSS3.

Вариант на CSS с заполнением, используя @property:

/* For example only --> */ body{margin:0;min-height:100vh;background-color:#111;background-image:url("https://i.stack.imgur.com/m9NKc.png"),radial-gradient(#fff8,#000f);background-position:0 0;background-repeat:no-repeat;background-size:auto;display:flex;flex-flow:column nowrap;justify-content:space-around;align-items:center;gap:1em}

.loader {
  font-size: min(2vw, 2vh); /* <-- Масштаб */
  width: 39.5em; height: 39.5em;
  border-radius: 50%;
  background-image: radial-gradient( #0000 0 14.1em, #353535 14.2em 14.9em, #0000 15em);
  overflow: hidden;
}

@property --angle {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}
.sectors {
  position: relative;
  height: 100%;
  -webkit-mask-image: repeating-conic-gradient( #000 0deg 3.061538461538462deg, #0000 3.461538461538462deg 6.923076923076923deg);
}
.sectors::before {
  content: "";
  position: absolute;
  width: 100%; height: 100%;
  background-image: conic-gradient( #3df6d6 0, #1ca0ec calc(var(--angle) / 7.2) calc(var(--angle) / 1.2), #3df6d6 var(--angle), #0000 var(--angle)), radial-gradient(#0000 0 17.1em, #929999 17.2em);
  -webkit-mask-image: radial-gradient(#0000 0 17.1em, #ffaa00 17.2em);
  animation: spin 2s steps(52, end) infinite;
}

@keyframes spin { 100% { --angle: 100%; } }

<div class="loader"><div class="sectors"></div></div>

P.S.: Дополню ответ, если найду более лаконичное решение на SVG.

БЛОГ НА HUSL

Как анимировать пунктирний круг svg? Эффект лоадера

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