three-dots/less/_dot-typing.less

CSS loading animations made with single element

/**
 * ==============================================
 * Dot Typing
 * ==============================================
 */

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

.dot-typing {
  .dot;

  position: relative;
  left: @left-pos;
  box-shadow:
    @x1 0 0 0 @dot-before-color,
    @x2 0 0 0 @dot-color,
    @x3 0 0 0 @dot-after-color;
  animation: dot-typing 1.5s infinite linear;
}

@keyframes dot-typing {
  0% {
    box-shadow:
      @x1 0 0 0 @dot-before-color,
      @x2 0 0 0 @dot-color,
      @x3 0 0 0 @dot-after-color;
  }

  16.6667% {
    box-shadow:
      @x1 -10px 0 0 @dot-before-color,
      @x2 0 0 0 @dot-color,
      @x3 0 0 0 @dot-after-color;
  }

  33.3333% {
    box-shadow:
      @x1 0 0 0 @dot-before-color,
      @x2 0 0 0 @dot-color,
      @x3 0 0 0 @dot-after-color;
  }

  50% {
    box-shadow:
      @x1 0 0 0 @dot-before-color,
      @x2 -10px 0 0 @dot-color,
      @x3 0 0 0 @dot-after-color;
  }

  66.6667% {
    box-shadow:
      @x1 0 0 0 @dot-before-color,
      @x2 0 0 0 @dot-color,
      @x3 0 0 0 @dot-after-color;
  }

  83.3333% {
    box-shadow:
      @x1 0 0 0 @dot-before-color,
      @x2 0 0 0 @dot-color,
      @x3 -10px 0 0 @dot-after-color;
  }

  100% {
    box-shadow:
      @x1 0 0 0 @dot-before-color,
      @x2 0 0 0 @dot-color,
      @x3 0 0 0 @dot-after-color;
  }
}