JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="spin1" class="spinner"></div>
<div id="spin2" class="spinner"></div>
<div id="spin3" class="spinner"></div>

<p>Create a custom spinner animation with a small javascript function</p>
<p>Transparent background, customize size, number of bars, color, speed, no external library required</p>
<p>/!\ Webkit only ! Should work on Chrome and Safari</p>

CSS

html, body {
      background: #e5e5e5;
      text-align: center;
    }
    
    div.spinner {
      position: relative;
      margin:20px;
      display: inline-block;
    }
    
    .spinnerbar {
      width: 12%;
      height: 26%;
      position: absolute;
      left: 44.5%;
      top: 37%;
      opacity: 0;
      -webkit-border-radius: 50px;
      -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
    }

@-webkit-keyframes fade {
      from {opacity: 1;}
      to {opacity: 0.25;}
    }

JavaScript

function createSpinner(containerid, nbars, speed, color, size)
{
  var spinner = document.getElementById(containerid);
  spinner.style.height = spinner.style.width = size;
  for(var b=0;b<nbars;b++)
  {      
    var bar = document.createElement("div");
    bar.setAttribute("class","spinnerbar");
    bar.setAttribute("style","-webkit-transform:rotate("+Math.floor(-360*b/nbars)+"deg) translate(0, -142%);  background: "+color+"; -webkit-animation: fade "+speed+"s linear infinite; -webkit-animation-delay: -"+(Math.floor(100*speed*b/nbars)/100)+"s;");
    spinner.appendChild(bar);
  }
}

createSpinner("spin1",7,1.2,"green","30px");
createSpinner("spin2",24,0.8,"rgba(0,80,170,0.6)","70px");
createSpinner("spin3",8,3,"#f08020","5em");