three-dots/less/_dot-pulse.less

CSS loading animations made with single element

/**
 * ==============================================
 * Dot Pulse
 * ==============================================
 */

@left-pos: -9999px;
@x1: -@left-pos - @dot-spacing;
@x2: -@left-pos;
@x3: -@left-pos + @dot-spacing;

.dot-pulse {
  .dot;

  position: relative;
  left: @left-pos;
  box-shadow: @x2 0 0 -5px;
  animation: dot-pulse 1.5s .25s infinite linear;

  &::before,
  &::after {
    .dot;

    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
  }

  &::before {
    box-shadow: @x1 0 0 -5px;
    animation: dot-pulse-before 1.5s infinite linear;
  }

  &::after {
    box-shadow: @x3 0 0 -5px;
    animation: dot-pulse-after 1.5s .5s infinite linear;
  }
}

@keyframes dot-pulse-before {
  0% {
    box-shadow: @x1 0 0 -5px;
  }

  30% {
    box-shadow: @x1 0 0 2px;
  }

  60%,
  100% {
    box-shadow: @x1 0 0 -5px;
  }
}

@keyframes dot-pulse {
  0% {
    box-shadow: @x2 0 0 -5px;
  }

  30% {
    box-shadow: @x2 0 0 2px;
  }

  60%,
  100% {
    box-shadow: @x2 0 0 -5px;
  }
}

@keyframes dot-pulse-after {
  0% {
    box-shadow: @x3 0 0 -5px;
  }

  30% {
    box-shadow: @x3 0 0 2px;
  }

  60%,
  100% {
    box-shadow: @x3 0 0 -5px;
  }
}