three-dots/less/_dot-fire.less

CSS loading animations made with single element

/**
 * ==============================================
 * Dot Fire
 * ==============================================
 */

@left-pos: -9999px;
@x1: -@left-pos;
@y1: -1.5 * @dot-spacing;
@y2: -1.5 * @dot-spacing * .25;
@y3: 1.5 * @dot-spacing;

.dot-fire {
  .dot;

  position: relative;
  left: @left-pos;
  box-shadow: @x1 @y3 0 -5px @dot-color;
  animation: dot-fire 1.5s infinite linear;
  animation-delay: -.85s;

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

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

  &::before {
    box-shadow: @x1 @y3 0 -5px @dot-before-color;
    animation: dot-fire 1.5s infinite linear;
    animation-delay: -1.85s;
  }

  &::after {
    box-shadow: @x1 @y3 0 -5px @dot-after-color;
    animation: dot-fire 1.5s infinite linear;
    animation-delay: -2.85s;
  }
}

@keyframes dot-fire {
  0% {
    box-shadow: @x1 @y3 0 -5px @dot-after-color;
  }

  1%,
  50% {
    box-shadow: @x1 @y2 0 2px @dot-after-color;
  }

  100% {
    box-shadow: @x1 @y1 0 -5px @dot-after-color;
  }
}