JSFiddle - React, Tailwind, and code Playground

by Balázs Baumgartner

HTML

<div id="spinner" class="animated"></div>

CSS

#spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 2px 2px 0 0 #3498db;
    position: absolute;
    left: 50%;
    top: 220px;
    margin: -20px 0 0 -20px;
    z-index: -1;
    visibility: hidden;
}

#spinner.animated {
  -webkit-animation: spin 1s infinite linear;
  -moz-animation: spin 1s infinite linear;
  -ms-animation: spin 1s infinite linear;
  -o-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
  z-index: 10;
  visibility: visible;
}

@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
    to { -ms-transform: rotate(360deg); }
}

@-o-keyframes spin {
    to { -o-transform: rotate(360deg); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}