Вариант на чистом 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.