spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/loaders/ring-dual.html7  Desc   : Two counter-rotating arcs forming a dual-ring loader8  ============================================================9-->10<!--svgarden11title: Dual ring12slug: ring-dual13category: loaders14tags: [loader, ring, counter-rotate, dasharray]15difficulty: beginner16techniques: [stroke-dasharray, animation-direction, transform-origin, "@keyframes"]17how_it_works: >18  Each ring is a full circle whose stroke-dasharray leaves most of it blank,19  so only an arc is visible. Both arcs run the same rotation keyframes, but20  the inner one sets animation-direction: reverse and a shorter duration, so21  the two chase each other in opposite directions at different speeds —22  a lot of perceived complexity from one keyframe block.23customizable:24  - { var: "--sg-color",    label: "Color", type: color, default: "#7F77DD" }25  - { var: "--sg-size",     label: "Size",  type: range, min: 24, max: 120, default: 56, unit: px }26  - { var: "--sg-duration", label: "Speed", type: range, min: 0.5, max: 4, step: 0.1, default: 1.6, unit: s }27created: 2026-08-1028-->29<div class="sg-ring-dual" style="--sg-color:#7F77DD; --sg-size:56px; --sg-duration:1.6s;">30  <svg viewBox="0 0 50 50" aria-hidden="true" focusable="false">31    <circle class="sg-ring-dual-outer" cx="25" cy="25" r="21" stroke-dasharray="66 132" />32    <circle class="sg-ring-dual-inner" cx="25" cy="25" r="13" stroke-dasharray="41 82" />33  </svg>34</div>35<style>36  .sg-ring-dual {37    width: var(--sg-size);38    height: var(--sg-size);39  }40  .sg-ring-dual svg {41    display: block;42    width: 100%;43    height: 100%;44  }45  .sg-ring-dual circle {46    fill: none;47    stroke: var(--sg-color);48    stroke-width: 4;49    stroke-linecap: round;50    transform-origin: 50% 50%;51    animation: sg-ring-dual-spin var(--sg-duration) linear infinite;52  }53  .sg-ring-dual-inner {54    opacity: 0.55;55    animation-direction: reverse;56    animation-duration: calc(var(--sg-duration) * 0.7);57  }58  @keyframes sg-ring-dual-spin {59    100% { transform: rotate(360deg); }60  }61</style>62