three-dots/less/_dot-overtaking.less

CSS loading animations made with single element

/**
 * ==============================================
 * Experimental: Gooey Effect
 * Dot Overtaking
 * ==============================================
 */

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

.dot-overtaking {
  .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: transparent, @color: @dot-color-hsl);

  position: relative;
  margin: -1px 0;
  filter: blur(2px);
  box-shadow: 0 -20px 0 0;
  animation: dot-overtaking 2s infinite cubic-bezier(.2, .6, .8, .2);

  &::before,
  &::after {
    .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: transparent, @color: @dot-color-hsl);

    box-shadow: 0 -20px 0 0;
    content: "";
    display: inline-block;
    filter: blur(2px);
    position: absolute;
    left: 0;
    top: 0;
  }

  &::before { animation: dot-overtaking 2s .3s infinite cubic-bezier(.2, .6, .8, .2); }
  &::after { animation: dot-overtaking 1.5s .6s infinite cubic-bezier(.2, .6, .8, .2); }
}

@keyframes dot-overtaking {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}