Animated loaders in Sass

loaders.scss

@mixin droplet($color, $time, $size, $scale) {
  position: relative;

  &::after {
    content: '';
    display: inline-block;
    width: $size;
    height: $size;
    border-radius: $size;
    background: $color;
    animation: $time ease blink infinite;
  }

  @keyframes blink {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale($scale);
    }
  }
}

@mixin ellipsis($color) {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  
  & > div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: $color;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  
    &:nth-child(1) {
      left: 8px;
      animation: enter 0.6s infinite;
    }

    &:nth-child(2) {
      left: 56px;
      animation: leave 0.6s infinite;
    }

    &:nth-child(3) {
      left: 8px;
      animation: move 0.6s infinite;
    }

    &:nth-child(4) {
      left: 32px;
      animation: move 0.6s infinite;
    }
  }

  @keyframes enter {
    0%   { transform: scale(0); }
    100% { transform: scale(1); }
  }
  
  @keyframes leave {
    0%   { transform: scale(1); }
    100% { transform: scale(0); }
  }
  
  @keyframes move {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(24px, 0); }
  }  
}