three-dots/less/_dot-floating.less

CSS loading animations made with single element

/**
 * ==============================================
 * Dot Floating
 * ==============================================
 */

@d-max: 50px;
@d-min: 12px;

.dot-floating {
  .dot;

  position: relative;
  animation: dot-floating 3s infinite cubic-bezier(.15, .6, .9, .1);

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

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

    left: -@d-min;
    animation: dot-floating-before 3s infinite ease-in-out;
  }

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

    left: -@d-min*2;
    animation: dot-floating-after 3s infinite cubic-bezier(.4, 0, 1, 1);
  }
}

@keyframes dot-floating {
  0% { left: ~"calc(-50% - @{dot-width}/2)"; }
  75% { left: ~"calc(50% + @{d-max}*2 + @{dot-width}/2)"; }
  100% { left: ~"calc(50% + @{d-max}*2 + @{dot-width}/2})"; }
}

@keyframes dot-floating-before {
  0% { left: -@d-max; }
  50% { left: -@d-min; }
  75% { left: -@d-max; }
  100% { left: -@d-max; }
}

@keyframes dot-floating-after {
  0% { left: -@d-max*2; }
  50% { left: -@d-min*2; }
  75% { left: -@d-max*2; }
  100% { left: -@d-max*2; }
}