Indeterminate bar

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/loaders/bar-indeterminate.html
  Desc   : Sliding indeterminate progress bar
  ============================================================
-->
<div class="sg-bar-indeterminate" style="--sg-color:#7F77DD; --sg-size:200px; --sg-duration:1.4s;">
  <svg viewBox="0 0 120 8" aria-hidden="true" focusable="false">
    <rect class="sg-bar-indeterminate-track" x="0" y="1" width="120" height="6" rx="3" />
    <rect class="sg-bar-indeterminate-runner" x="0" y="1" width="36" height="6" rx="3" />
  </svg>
</div>
<style>
  .sg-bar-indeterminate {
    width: var(--sg-size);
  }
  .sg-bar-indeterminate svg {
    display: block;
    width: 100%;
  }
  .sg-bar-indeterminate-track {
    fill: var(--sg-color);
    opacity: 0.18;
  }
  .sg-bar-indeterminate-runner {
    fill: var(--sg-color);
    transform-box: fill-box;
    transform-origin: center;
    animation: sg-bar-indeterminate-slide var(--sg-duration) ease-in-out infinite;
  }
  @keyframes sg-bar-indeterminate-slide {
    0%   { transform: translateX(-40px) scaleX(0.5); }
    50%  { transform: translateX(42px)  scaleX(1.6); }
    100% { transform: translateX(126px) scaleX(0.5); }
  }
</style>