Dual ring

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/loaders/ring-dual.html
  Desc   : Two counter-rotating arcs forming a dual-ring loader
  ============================================================
-->
<div class="sg-ring-dual" style="--sg-color:#7F77DD; --sg-size:56px; --sg-duration:1.6s;">
  <svg viewBox="0 0 50 50" aria-hidden="true" focusable="false">
    <circle class="sg-ring-dual-outer" cx="25" cy="25" r="21" stroke-dasharray="66 132" />
    <circle class="sg-ring-dual-inner" cx="25" cy="25" r="13" stroke-dasharray="41 82" />
  </svg>
</div>
<style>
  .sg-ring-dual {
    width: var(--sg-size);
    height: var(--sg-size);
  }
  .sg-ring-dual svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .sg-ring-dual circle {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 4;
    stroke-linecap: round;
    transform-origin: 50% 50%;
    animation: sg-ring-dual-spin var(--sg-duration) linear infinite;
  }
  .sg-ring-dual-inner {
    opacity: 0.55;
    animation-direction: reverse;
    animation-duration: calc(var(--sg-duration) * 0.7);
  }
  @keyframes sg-ring-dual-spin {
    100% { transform: rotate(360deg); }
  }
</style>