spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/loaders/bar-indeterminate.html7  Desc   : Sliding indeterminate progress bar8  ============================================================9-->10<!--svgarden11title: Indeterminate bar12slug: bar-indeterminate13category: loaders14tags: [loader, progress, bar, keyframes]15difficulty: beginner16techniques: [translate, scaleX, "@keyframes", rx-rounded-rect]17how_it_works: >18  A rounded track rect sits under a shorter "runner" rect. The runner slides19  from off-screen left to off-screen right with translateX while scaleX20  stretches it mid-flight and squashes it at both ends — that squash/stretch21  is what sells the material-style indeterminate feel rather than a rigid22  block gliding by. ease-in-out on an infinite loop gives it a breathing rhythm.23customizable:24  - { var: "--sg-color",    label: "Color", type: color, default: "#7F77DD" }25  - { var: "--sg-size",     label: "Width", type: range, min: 100, max: 400, default: 200, unit: px }26  - { var: "--sg-duration", label: "Speed", type: range, min: 0.6, max: 4, step: 0.1, default: 1.4, unit: s }27created: 2026-08-1028-->29<div class="sg-bar-indeterminate" style="--sg-color:#7F77DD; --sg-size:200px; --sg-duration:1.4s;">30  <svg viewBox="0 0 120 8" aria-hidden="true" focusable="false">31    <rect class="sg-bar-indeterminate-track" x="0" y="1" width="120" height="6" rx="3" />32    <rect class="sg-bar-indeterminate-runner" x="0" y="1" width="36" height="6" rx="3" />33  </svg>34</div>35<style>36  .sg-bar-indeterminate {37    width: var(--sg-size);38  }39  .sg-bar-indeterminate svg {40    display: block;41    width: 100%;42  }43  .sg-bar-indeterminate-track {44    fill: var(--sg-color);45    opacity: 0.18;46  }47  .sg-bar-indeterminate-runner {48    fill: var(--sg-color);49    transform-box: fill-box;50    transform-origin: center;51    animation: sg-bar-indeterminate-slide var(--sg-duration) ease-in-out infinite;52  }53  @keyframes sg-bar-indeterminate-slide {54    0%   { transform: translateX(-40px) scaleX(0.5); }55    50%  { transform: translateX(42px)  scaleX(1.6); }56    100% { transform: translateX(126px) scaleX(0.5); }57  }58</style>59