Domino Loader

<div class="ldr-domino" role="status" aria-label="Loading">
  <span style="--i: 0"></span><span style="--i: 1"></span><span style="--i: 2"></span><span style="--i: 3"></span><span style="--i: 4"></span>
</div>

.ldr-domino {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: calc(var(--s) * 2.1);
  height: calc(var(--s) * 0.6);
}
.ldr-domino::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
}
.ldr-domino span {
  position: absolute;
  bottom: 1px;
  left: calc(var(--i) * var(--s) * 0.36);
  width: calc(var(--s) / 10);
  height: calc(var(--s) / 2);
  border-radius: calc(var(--s) / 40);
  background: var(--c);
  transform-origin: 100% 100%;
  animation: ldr-domino-topple 2.4s infinite;
  animation-delay: calc(var(--i) * 0.14s);
}
.ldr-domino span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 20%;
  right: 20%;
  height: 1px;
  background: color-mix(in srgb, var(--c) 45%, #fff);
}
.ldr-domino span:last-child { animation-name: ldr-domino-land; }
/* Leans 31deg: its top corner comes to rest on the next domino. */
@keyframes ldr-domino-topple {
  0%       { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  6%       { transform: rotate(31deg); animation-timing-function: ease-out; }
  8%       { transform: rotate(26deg); animation-timing-function: ease-in; }
  10%, 52% { transform: rotate(31deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  62%, 100% { transform: rotate(0deg); }
}
@keyframes ldr-domino-land {
  0%       { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  9%       { transform: rotate(90deg); animation-timing-function: ease-out; }
  11%      { transform: rotate(80deg); animation-timing-function: ease-in; }
  13%, 52% { transform: rotate(90deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  62%, 100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-domino, .ldr-domino *, .ldr-domino::before, .ldr-domino::after, .ldr-domino *::before, .ldr-domino *::after {
    animation-duration: 3s;
  }
}

Similar loaders