JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class='spinner'>
  <div class='dot'></div>
  <div class='dot'></div>
  <div class='dot'></div>
</div>
<svg>
  <defs>
    <filter id='goo'>
      <feGaussianBlur in='SourceGraphic' stdDeviation='8' result='blur' />
      <feColorMatrix in='blur' mode='matrix' values='
                1 0 0 0 0 
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 50 -8' result='goo' />
      <feBlend in='SourceGraphic' in2='goo' />
    </filter>
  </defs>
</svg>

CSS

:root {
    --spinner-size: 5rem;
    --dot-size: calc(var(--spinner-size) / 5);
    --duration: 3s;
    --delay: calc(var(--duration) / 60);
}

body {
    background: #4f70d2;
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: translateX(0) translateY(0);
                transform: translateX(0) translateY(0);
    }
    20% {
        -webkit-transform: translateX(0) translateY(0);
                transform: translateX(0) translateY(0);
    }
    25% {
        -webkit-transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
                transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
    }
    45% {
        -webkit-transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
                transform: translateX(0) translateY(calc(var(--spinner-size) - var(--dot-size)));
    }
    50% {
        -webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
                transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
    }
    70% {
        -webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
                transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(calc(var(--spinner-size) - var(--dot-size)));
    }
    75% {
        -webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
                transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
    }
    95% {
        -webkit-transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
                transform: translateX(calc(var(--spinner-size) - var(--dot-size))) translateY(0);
    }
}

@keyframes rotate {
    from {
        -webkit-transform: translateX(0) translateY(0);
  ...