CSS Tip

Dots loader using shape()

Recreating a 3 dots loader using shape() and animating it using CSS variables and @property

CSS-only dots loader

@property --x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 80%; 
}
@property --y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 80%; 
}
@property --z {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 80%; 
}
.loader {
  aspect-ratio: 3;
  --d: ,arc by 0 -60% of 1px, arc by 0 60% of 1px;
  clip-path: 
    shape(
      from    calc( 50%/3) var(--x) var(--d),
      move to calc(150%/3) var(--y) var(--d),
      move to calc(250%/3) var(--z) var(--d)
    );
  animation: l 1s infinite;
}
@keyframes l {
  20%  {--x:60%; --y:80%;         }
  40%  {--x:100%;--y:60%; --z:80% }
  60%  {--x:80%; --y:100%;--z:60% }
  80%  {         --y:80%; --z:100%}
}

See the Pen Dots loader using shape() by Temani Afif (@t_afif) on CodePen.

More CSS Loaders: css-loaders.com

More CSS Tips