JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<label for="load">load the thing</label>
<input type="checkbox" name="" id="load">

<div class="spinner">
  <div class="inner"></div>
</div>

CSS

#load:not(:checked)~.spinner {
  display: none;
}

#load:checked~.spinner {
  animation: 500ms delay_show 1;
}

@keyframes delay_show {
  0% {
    opacity: 0;
  }
  99.99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.spinner .inner {
  width: 2em;
  height: 2em;
  background: #334249;
  animation: 1s spin infinite linear;
  border-radius: 25%;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(120deg);
  }
  66% {
    transform: rotate(240deg);
  }
  100% {
    transform: rotate(359.7deg);
  }
}