three-dots/less/_dot-emoji.less

CSS loading animation made by single element.

/**
 * ==============================================
 * Experiment
 * Dot Emoji ⚽ 🏀 🏐
 * ==============================================
 */

@d: 20px;

.dot-emoji {
  font-size: 10px;
  height: @dotHeight;
  position: relative;

  &::before {
    animation: dotEmoji 1s infinite;
    content: "⚽🏀🏐";
    display: inline-block;
    position: relative;
  }
}

@keyframes dotEmoji {
  0% {
    animation-timing-function: ease-in;
    top: -@d;
  }
  34% { transform: scale(1, 1); }

  35% {
    animation-timing-function: ease-out;
    top: @d;
    transform: scale(1.5, .5);
  }
  45% { transform: scale(1, 1); }
  90% { top: -@d; }
  100% { top: -@d; }
}