three-dots/less/_dot-hourglass.less

CSS loading animations made with single element

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

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

@r: @dot-spacing;
@originX: @dot-width/2;
@originY: @dot-height/2 + @r;

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

  position: relative;
  top: -@r;
  margin: -1px 0;
  filter: blur(2px);
  transform-origin: @originX @originY;
  animation: dot-hourglass 2.4s .6s infinite ease-in-out;

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

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

  &::before { top: @r + @r; }
  &::after { animation: dot-hourglass-after 2.4s infinite cubic-bezier(.65, .05, .36, 1); }
}

@keyframes dot-hourglass {
  0% { transform: rotateZ(0deg); }
  25% { transform: rotateZ(180deg); }
  50% { transform: rotateZ(180deg); }
  75% { transform: rotateZ(360deg); }
  100% { transform: rotateZ(360deg); }
}

@keyframes dot-hourglass-after {
  0% { transform: translateY(0); }
  25% { transform: translateY(@r*2); }
  50% { transform: translateY(@r*2); }
  75% { transform: translateY(0); }
  100% { transform: translateY(0); }
}