Red-white-blue spinner

by Spencer Smith

HTML

<div class="spinner">
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
</div>

CSS

.spinner {
  width: 100px;
  height: 100px;
  float: left;
  position: relative;
}
.spin-bar {
  width: 100px;
  height: 10px;
  position: absolute;
  box-sizing: border-box;
  border-left: 20px solid deeppink;
  background-color: yellow;
  outline: 2px solid black;
  box-shadow: 0 0 5px 4px red;
  border-right: 12px solid transparent;
  top: 45px;
}

JavaScript

var spinner = document.querySelector('.spinner');
var spinBars = document.querySelectorAll('.spin-bar');
var step = 0;
setRotation(step);
setInterval(function(){
  setRotation(step);
  step = step >= 15 ? 0 : step + 1;
}, 30);

function setRotation(step){
	for(var i = 0; i < spinBars.length; i++){
    spinBars[i].style = "transform: rotate(calc(22.5deg * " + (i - step) + ")); opacity: " + (1 - ((i) / 10));
  }
}