three-dots/less/_dot-carousel.less

CSS loading animations made with single element

/**
 * ==============================================
 * Dot Carousel
 * ==============================================
 */

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

.dot-carousel {
  .dot;

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

@keyframes dot-carousel {
  0% {
    box-shadow:
      @x1 0 0 -1px @dot-color,
      @x2 0 0 1px @dot-color,
      @x3 0 0 -1px @dot-color;
  }

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

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