JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<div class="spinner">
  <div class="spin-bar" style="transform: rotate(calc(22.5deg * 0)); opacity: 1"></div>
  <div class="spin-bar" style="transform: rotate(calc(22.5deg * 1)); opacity: .9;"></div>
  <div class="spin-bar" style="transform: rotate(calc(22.5deg * 2)); opacity: .8"></div>
  <div class="spin-bar" style="transform: rotate(calc(22.5deg * 3)); opacity: .7"></div>
  <div class="spin-bar" style="transform: rotate(calc(22.5deg * 4)); opacity: .6"></div>
  <div class="spin-bar" style="transform: rotate(calc(22.5deg * 5)); opacity: .5"></div>
  <div class="spin-bar" style="transform: rotate(calc(22.5deg * 6)); opacity: .4"></div>
  <div class="spin-bar" style="transform: rotate(calc(22.5deg * 7)); opacity: .3"></div>
  <div class="spin-bar" style="transform: rotate(calc(22.5deg * 8)); opacity: .2"></div>
  <div class="spin-bar" style="transform: rotate(calc(22.5deg * 9)); opacity: .1"></div>
</div>

CSS

.spinner {
  width: 60px;
  height: 60px;
  //background-color: tomato;
  position: relative;
  padding: 2px;
}
.spin-bar {
  width: 60px;
  height: 6px;
  position: absolute;
  box-sizing: border-box;
  border-left: 12px solid black;
  border-right: 12px solid transparent;
  top: 29px;
}

JavaScript

var spinner = document.querySelector('.spinner');
var step = 0;
setInterval(function(){
	spinner.style = "transform: rotate(calc(-22.5deg * " + step + "));";
  step = step >= 15 ? 0 : step + 1;
}, 50);