three-dots/less/_dot-falling.less

CSS loading animations made with single element

/**
 * ==============================================
 * Dot Falling
 * ==============================================
 */

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

@y1: -@dot-spacing;
@y2: 0;
@y3: @dot-spacing;

@color-0: fade(@dot-color, 0%);
@color-1: fade(@dot-color, 100%);

@color-before-0: rgba(@dot-before-color, 0%);
@color-before-1: rgba(@dot-before-color, 100%);

@color-after-0: rgba(@dot-after-color, 0%);
@color-after-1: rgba(@dot-after-color, 100%);

.dot-falling {
  .dot;

  position: relative;
  left: @left-pos;
  box-shadow: @x2 0 0 0 @dot-color;
  animation: dot-falling 1s infinite linear;
  animation-delay: .1s;

  &::before,
  &::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
  }

  &::before {
    .dot(@bg-color: @dot-before-color);

    animation: dot-falling-before 1s infinite linear;
  }

  &::after {
    .dot(@bg-color: @dot-after-color);

    animation: dot-falling-after 1s .2s infinite linear;
  }
}

@keyframes dot-falling {
  0% {
    box-shadow: @x2 @y1 0 0 @color-0;
  }

  25%,
  50%,
  75% {
    box-shadow: @x2 @y2 0 0 @color-1;
  }

  100% {
    box-shadow: @x2 @y3 0 0 @color-0;
  }
}

@keyframes dot-falling-before {
  0% {
    box-shadow: @x1 @y1 0 0 @color-before-0;
  }

  25%,
  50%,
  75% {
    box-shadow: @x1 @y2 0 0 @color-before-1;
  }

  100% {
    box-shadow: @x1 @y3 0 0 @color-before-0;
  }
}

@keyframes dot-falling-after {
  0% {
    box-shadow: @x3 @y1 0 0 @color-after-0;
  }

  25%,
  50%,
  75% {
    box-shadow: @x3 @y2 0 0 @color-after-1;
  }

  100% {
    box-shadow: @x3 @y3 0 0 @color-after-0;
  }
}