Dash spinner

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/loaders/spinner-dash.html
  Desc   : Rotating arc loader using animated stroke-dasharray
  ============================================================
-->
<div class="sg-spinner-dash" style="--sg-color:#7F77DD; --sg-size:48px; --sg-duration:1.5s;">
  <svg viewBox="0 0 50 50" aria-hidden="true" focusable="false">
    <circle cx="25" cy="25" r="20" />
  </svg>
</div>
<style>
  .sg-spinner-dash {
    width: var(--sg-size);
    height: var(--sg-size);
  }
  .sg-spinner-dash svg {
    display: block;
    width: 100%;
    height: 100%;
    animation: sg-spinner-dash-rotate calc(var(--sg-duration) * 1.4) linear infinite;
  }
  .sg-spinner-dash circle {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 4.5;
    stroke-linecap: round;
    animation: sg-spinner-dash-arc var(--sg-duration) ease-in-out infinite;
  }
  @keyframes sg-spinner-dash-rotate {
    100% { transform: rotate(360deg); }
  }
  @keyframes sg-spinner-dash-arc {
    0%   { stroke-dasharray: 1 150; stroke-dashoffset: 0; }
    50%  { stroke-dasharray: 90 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90 150; stroke-dashoffset: -124; }
  }
</style>