CSS segmented circle loading animation

jsbin.vudiz.css

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #2c3e50;
}

div {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -50px;
  
  display: block;
  width: 100px;
  height: 100px;
}

i {
  position: absolute;
  overflow: hidden;
    
  display: block;
  width: 46px;
  height: 46px;
}

i:before {
  content: '';
  position: absolute;
  
  display: block;
  width: 100px;
  height: 100px;
  
  border: solid 10px #34495e;
  border-radius: 100px;
}

i.active:before {
  border-color: rgba(255,255,255,0.65);
}

i:nth-child(4) {
  top: 0;
  left: 0;
}

i:nth-child(4):before {
  
}

i:nth-child(1) {
  top: 0;
  right: 0;
}

i:nth-child(1):before {
  right: 0;
}

i:nth-child(3) {
  bottom: 0;
  left: 0;
}

i:nth-child(3):before {
  bottom: 0;
}

i:nth-child(2) {
  bottom: 0;
  right: 0;
}

i:nth-child(2):before {
  bottom: 0;
  right: 0;
}

jsbin.vudiz.html

<div>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</div>

jsbin.vudiz.js

var cycle = function() {
  var segments, clear;
  
  segments = document.getElementsByTagName('i');
  clear = true;
  
  for (i=0; i<4; i++) {
    if (segments[i].className === '') {
      segments[i].className = 'active';
      clear = false;
      break;
    }
  }
  
  if (clear === true) {
    for (i=0; i<4; i++) {
      segments[i].className = '';
    }
  }
  
  window.setTimeout(function() {
    cycle();
  }, 1000);
};

cycle();