SVG Circular Dash Loader

<svg class="scdl" width="60" height="60" viewBox="0 0 60 60">
  <circle class="scdl-bg" cx="30" cy="30" r="24" fill="none" stroke="#1e293b" stroke-width="3"></circle>
  <circle class="scdl-fg" id="scdl-fg" cx="30" cy="30" r="24" fill="none" stroke="#6366f1" stroke-width="3" stroke-linecap="round"></circle>
</svg>

.scdl {
  display: block;
}
.scdl-fg {
  transform-origin: center;
}

const circle = document.getElementById('scdl-fg');
const circumference = 2 * Math.PI * 24;
circle.style.strokeDasharray = circumference;
let t = 0;
function animate() {
  t += 0.03;
  const offset = circumference * (0.75 + 0.25 * Math.sin(t));
  circle.style.strokeDashoffset = offset;
  circle.style.transform = 'rotate(' + (t * 60) + 'deg)';
  requestAnimationFrame(animate);
}
animate();