<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="37" r="7"/>
  <circle cx="62.5" cy="43.5" r="7"/>
  <circle cx="62.5" cy="56.5" r="7"/>
  <circle cx="50" cy="65" r="7"/>
  <circle cx="37.5" cy="56.5" r="7"/>
  <circle cx="37.5" cy="43.5" r="7"/>
</svg>
html,body {height: 100%;}body{display: flex;flex-direction:column;align-items: center;justify-content:center;width:100%;background:#00AABB;}svg{max-width:100%;}svg{max-width: 100%;}

$loader-count: 6;
$loader-proportion: 200px;
$loader-color: #00AABB;
$stagger: 0.1875s;
$animation_config: (
  name: swoosh,
  duration: 600ms,
  timing: cubic-bezier(.66,.14,.83,.67),
  iteration: infinite,
  direction: alternate,
  fill-mode: both
);

@function sh-setup($config) {
  @return zip(map-values($config)...);
}

@keyframes swoosh {
  to {
    transform: scale(1);
  }
}

svg {
  position: relative;
  width: $loader-proportion;
  height: $loader-proportion;

  circle {
    animation: sh-setup($animation_config);
    position: absolute;
    transform: scale(0);
    transform-origin: center center;
    fill: $loader-color;
  }
}

@for $i from 1 through $loader-count {
  circle:nth-of-type(#{$i}) {
    animation-delay: $i * $stagger;
    fill: lighten($loader-color, $i * 3%);
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/grayghostvisuals/pen/a08e0d79c150ff5030f9b6afaa137749.js