adorable-loader.scss

$dot-crush-size: 0.5em;
$dot-size: 0.5em;

.loading__wrapper {
  display: flex;

  .loading-background {
    border-radius: 1000px;
    display: flex;
    font-size: 1em;
    justify-content: space-between;
    margin-bottom: .25em;
    margin-right: 0.5em;
    max-width: 2em;
    padding-left: .25em;
    padding-right: .25em;
    padding-top: 0.15em;
    padding-bottom: 0.15em;
  }

  .message {
    align-self: top;
    font-size: .75em;
    font-style: italic;
  }

  .left-dot,
  .mid-dot,
  .right-dot {
    animation-fill-mode: both;
    animation: load7 1s infinite ease-in-out;
    border-radius: 50%;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    will-change: transform;
  }

  .left-dot { animation-delay: -0.32s; }

  .mid-dot { animation-delay: -0.16s; }
}

@keyframes load7 {
  0%,
  80%,
  100% { box-shadow: 0 $dot-size 0 $dot-crush-size; }
  40% { box-shadow: 0 $dot-size 0 0; }
}