WebAnimationsApi - Colorfull dots

Colorfull Spinning dots. 2015-12-14

by schrodingers

CSS

body {
  background: ghostwhite;  
  display: flex;    
/*   align-items: center;
   */  
   justify-content: center;
} 

ol {
  position: relative;
  margin: 20% 50%;
}


.dot {
  position: absolute;  
  display: block;  
  width: 1em;
  height: 1em;
  border-radius: 50%;
}

body {
  font-size: 10px;
}

JavaScript

/* Web animations Rotating circe - DOTS!  */

var list = document.createElement("ol");
  document.body.appendChild(list);  

var colors = ["#ff6699", "#ff9900", "#ffcc00", "#9adb1b", "#00cc66", "#00cccc", "#00ccff", "#6633cc", "#ff66cc"];
var layers = 8; // количество окружностей
var start = 5; // количество элементов в центре?

for (var i = 0; i <= layers; i++){
	var n = i * start;
  for (var j = 0; j < n; j++){
  	Circle(i, j/n);    
  }
}

function Circle(layer, fraction){
	var dot = document.createElement('li');
  dot.classList.add('dot');
  dot.layer = i;            
  dot.fraction = j / n;  
  var rotate = 'rotate(' + (360 * dot.fraction) + 'deg)';  
  var translate = 'translate(' + (dot.layer * 2 - 0.25) + 'em)';   
  
  var col = colors[i]; 
  dot.style.background = col; 
  dot.animate(
  [  
  {transform: rotate + ' rotate(0deg) ' + translate},
  {transform: rotate + ' rotate(360deg) ' + translate},
  ],             
  {duration: 1000 * layer,      
  iterations: Infinity}
  
  );
  
  list.appendChild(dot); 
  }