spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/loaders/spinner-dash.html7  Desc   : Rotating arc loader using animated stroke-dasharray8  ============================================================9-->10<!--svgarden11title: Dash spinner12slug: spinner-dash13category: loaders14tags: [loader, dasharray, keyframes, infinite]15difficulty: beginner16techniques: [stroke-dasharray, stroke-dashoffset, "@keyframes", transform-rotate]17how_it_works: >18  The outer rotation is a simple linear spin of the whole SVG. The "chasing"19  effect comes from a second animation on the circle itself: stroke-dasharray20  grows the visible arc from a sliver to most of the circumference and back,21  while stroke-dashoffset shifts where that arc starts, so the head appears22  to run away from the tail.23customizable:24  - { var: "--sg-color",    label: "Color", type: color, default: "#7F77DD" }25  - { var: "--sg-size",     label: "Size",  type: range, min: 24, max: 120, default: 48, unit: px }26  - { var: "--sg-duration", label: "Speed", type: range, min: 0.5, max: 4, step: 0.1, default: 1.5, unit: s }27created: 2026-08-1028-->29<div class="sg-spinner-dash" style="--sg-color:#7F77DD; --sg-size:48px; --sg-duration:1.5s;">30  <svg viewBox="0 0 50 50" aria-hidden="true" focusable="false">31    <circle cx="25" cy="25" r="20" />32  </svg>33</div>34<style>35  .sg-spinner-dash {36    width: var(--sg-size);37    height: var(--sg-size);38  }39  .sg-spinner-dash svg {40    display: block;41    width: 100%;42    height: 100%;43    animation: sg-spinner-dash-rotate calc(var(--sg-duration) * 1.4) linear infinite;44  }45  .sg-spinner-dash circle {46    fill: none;47    stroke: var(--sg-color);48    stroke-width: 4.5;49    stroke-linecap: round;50    animation: sg-spinner-dash-arc var(--sg-duration) ease-in-out infinite;51  }52  @keyframes sg-spinner-dash-rotate {53    100% { transform: rotate(360deg); }54  }55  @keyframes sg-spinner-dash-arc {56    0%   { stroke-dasharray: 1 150; stroke-dashoffset: 0; }57    50%  { stroke-dasharray: 90 150; stroke-dashoffset: -35; }58    100% { stroke-dasharray: 90 150; stroke-dashoffset: -124; }59  }60</style>61