JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<!-- Comments are just to fix whitespace with inline-block -->
<div class="Spinner"><!--
    --><div class="Spinner-line Spinner-line--1"><!--
        --><div class="Spinner-line-cog"><!--
            --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--left"></div><!--
        --></div><!--
        --><div class="Spinner-line-ticker"><!--
            --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--center"></div><!--
        --></div><!--
        --><div class="Spinner-line-cog"><!--
            --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--right"></div><!--
        --></div><!--
    --></div><!--
    --><div class="Spinner-line Spinner-line--2"><!--
        --><div class="Spinner-line-cog"><!--
            --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--left"></div><!--
        --></div><!--
        --><div class="Spinner-line-ticker"><!--
            --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--center"></div><!--
        --></div><!--
        --><div class="Spinner-line-cog"><!--
            --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--right"></div><!--
        --></div><!--
    --></div><!--
    --><div class="Spinner-line Spinner-line--3"><!--
        --><div class="Spinner-line-cog"><!--
            --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--left"></div><!--
        --></div><!--
        --><div class="Spinner-line-ticker"><!--
            --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--center"></div><!--
        --></div><!--
        --><div class="Spinner-line-cog"><!--
            --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--right"></div><!--
        --></div><!--
    --></div><!--
    --><div class="Spinner-line Spinner-line--4"><!--
        --><div class="Spinner-line-cog"><!--
            --><div class="Spinner-line-cog-inner Spinner-line-cog-inner--left"></div><!--
        --></div><!--
        --><div...

CSS

.Spinner {
  height: 60px;
  left: 50%;
  margin-left: -14px;
  position: absolute;
  top: 45%;
  width: 60px;
  /* Spins external container */
  -webkit-animation: container-rotate 1600ms linear infinite;
          animation: container-rotate 1600ms linear infinite;
}

.Spinner-line {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.Spinner-line--1 {
  border-color: #000;
  -webkit-animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-1-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
          animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-1-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.Spinner-line--2 {
  border-color: #000;
  -webkit-animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-2-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
          animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-2-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.Spinner-line--3 {
  border-color: #000;
  -webkit-animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-3-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
          animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-3-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.Spinner-line--4 {
  border-color: #000;
  -webkit-animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-4-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
          animation: fill-unfill-rotate 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, line-4-fade-in-out 4800ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.Spinner-line-cog {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}

.Spinner-line-cog-inner {
 ...