JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<!-- Based on http://fabiovirgi.com/wp-content/themes/inside/images/ajax-loader.gif -->
<div class="qtp-spinner">
  <div class="slice"><div></div></div>
  <div class="slice"><div></div></div>
  <div class="slice"><div></div></div>
  <div class="slice"><div></div></div>
  <div class="slice"><div></div></div>
  <div class="slice"><div></div></div>
  <div class="slice"><div></div></div>
  <div class="slice"><div></div></div>
</div>

CSS

.qtp-spinner {
    font-size: 25px;
    position: relative;
    height: 10em;
    width: 10em;
    overflow: hidden;
    border-radius: 50%;
    -webkit-animation: pie-spinner 6s linear infinite forwards;
}
@-webkit-keyframes pie-spinner {
    to {
        -webkit-transform: rotate(-360deg)
    }
}
.qtp-spinner .slice {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip: rect(0px, 10em, 10em, 5em);
}
.qtp-spinner .slice:nth-child(2) { -webkit-transform: rotate(45deg); }
.qtp-spinner .slice:nth-child(3) { -webkit-transform: rotate(90deg); }
.qtp-spinner .slice:nth-child(4) { -webkit-transform: rotate(135deg); }
.qtp-spinner .slice:nth-child(5) { -webkit-transform: rotate(180deg); }
.qtp-spinner .slice:nth-child(6) { -webkit-transform: rotate(225deg); }
.qtp-spinner .slice:nth-child(7) { -webkit-transform: rotate(270deg); }
.qtp-spinner .slice:nth-child(8) { -webkit-transform: rotate(315deg); }
.qtp-spinner .slice div {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    clip: rect(0px, 5em, 10em, 0px);
    background-color: green;
    -webkit-animation: pie-spinner-slice-div 1s linear infinite forwards;
}
@-webkit-keyframes pie-spinner-slice-div {
    to {
        opacity: 0;
        -webkit-transform: rotate(45deg);
    }
}
.qtp-spinner .slice:nth-child(2) div { -webkit-animation-delay: 125ms }
.qtp-spinner .slice:nth-child(3) div { -webkit-animation-delay: 250ms }
.qtp-spinner .slice:nth-child(4) div { -webkit-animation-delay: 375ms }
.qtp-spinner .slice:nth-child(5) div { -webkit-animation-delay: 500ms }
.qtp-spinner .slice:nth-child(6) div { -webkit-animation-delay: 625ms }
.qtp-spinner .slice:nth-child(7) div { -webkit-animation-delay: 750ms }
.qtp-spinner .slice:nth-child(8) div { -webkit-animation-delay: 875ms }