Pulsing dots

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/loaders/dots-pulse.html
  Desc   : Three SVG circles pulsing in sequence
  ============================================================
-->
<div class="sg-dots-pulse" style="--sg-color:#7F77DD; --sg-size:64px; --sg-duration:1.2s;">
  <svg viewBox="0 0 60 20" aria-hidden="true" focusable="false">
    <circle cx="10" cy="10" r="6" />
    <circle cx="30" cy="10" r="6" />
    <circle cx="50" cy="10" r="6" />
  </svg>
</div>
<style>
  .sg-dots-pulse {
    width: var(--sg-size);
  }
  .sg-dots-pulse svg {
    display: block;
    width: 100%;
  }
  .sg-dots-pulse circle {
    fill: var(--sg-color);
    transform-box: fill-box;
    transform-origin: center;
    animation: sg-dots-pulse-beat var(--sg-duration) ease-in-out infinite;
  }
  .sg-dots-pulse circle:nth-of-type(2) { animation-delay: calc(var(--sg-duration) / 3); }
  .sg-dots-pulse circle:nth-of-type(3) { animation-delay: calc(var(--sg-duration) / 3 * 2); }
  @keyframes sg-dots-pulse-beat {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(0.45); opacity: 0.35; }
  }
</style>