JSFiddle - React, Tailwind, and code Playground

by beau

HTML

Code pasted here for reference. Note: This SCSS works, but JSFiddle doesn't support the animations for some reason.

<div class="spindicator">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

SCSS

$tineWidth: 14px; 
$tineHeight: 50px;

$animationDuration: 2000ms;



.spindicator { position:relative; z-index:1; width:200px; height:200px; margin:20px auto; background:rgba(0,0,0,0.5);
    > div { position:absolute; z-index:1; left:50%; top:50%; margin-top:-$tineHeight * 1.6; margin-left:-$tineWidth / 2; width:$tineWidth; height:$tineHeight; -webkit-transform-origin:50% 160%; -webkit-animation:spin 2s infinite; }

    @for $i from 1 through 12 {
        > div:nth-child(#{$i}) { -webkit-transform:rotate( ($i - 1) * 30 + deg); -webkit-animation-delay: $animationDuration / 12 * $i; }
    }
}

@-webkit-keyframes spin {
    @for $i from 0 through 11 {
        $n: $i * 100% / 12;
        $alpha: 1 - ($i * 1/12);
        #{$n} { background-color:rgba(255,255,255,$alpha); }
    }
}

// Added so that tines can be seen
.spindicator div { background-color: #fff }