A Pen by Louis Hoebregts.

Rainbow-loading.markdown

Rainbow loading

This loading animation can be used and personalized for every website ! Enjoy it ;)

A Pen by Louis Hoebregts on CodePen.

License.

script.js

	var ww = window.innerWidth, wh = window.innerHeight;

	var paper = Raphael(0,0, "100%", "100%");
	var circles = [],
		pos     = [],
		count   = 0,
		timer;

	function Ctrl(){
		this.Number = 12;
		this.Radius = 10;
		this.Size   = 30;
		this.Speed  = 600;
		this.Delay  = 150;
	}	
	var ctrl = new Ctrl;
	var gui  = new dat.GUI;
	gui.add(ctrl, 'Number', 3, 50).step(1).onChange(reset);
	gui.add(ctrl, 'Radius', 1, 100).onChange(reset);
	gui.add(ctrl, 'Size', 5, 80).onChange(reset);
	gui.add(ctrl, 'Speed', 100, 2000).onChange(reset);
	gui.add(ctrl, 'Delay', 20, 1200).onChange(reset);
	var controller;


	function reset(){
		paper.remove();
		paper   = Raphael(0,0, "100%", "100%");
		circles = [];
		timer   = clearTimeout(timer);
		count   = 0;
		pos     = [];
		draw();
	}
	function draw(){
    timer   = clearTimeout(timer);
		for(var i=0;i<ctrl.Number || loopCi();i++){
			circles[i] = paper.circle(ww/2,wh/2,ctrl.Radius);
			circles[i].transform("T0,-"+(wh/150)*ctrl.Size);
			circles[i].transform("...R"+(360/ctrl.Number*i)+","+ww/2+","+wh/2);
			circles[i].attr({fill:Raphael.hsl2rgb((360/ctrl.Number*i),100,50)});
			pos[i] = [circles[i].getBBox().cx,circles[i].getBBox().cy];
		}
		paper.forEach(function(circle){circle.attr({stroke:"none"})});
	}

	function loopCi(){
		for(var j=0;j<ctrl.Number;j++){
			circles[j].animate(rotateAnim(j).delay(j*ctrl.Delay));
		}
		count++;
		timer = setTimeout(loopCi,ctrl.Delay*ctrl.Number+ctrl.Speed)
	}

	function rotateAnim(k){
		var center = (count*2)+1+k<ctrl.Number?(count*2)+1+k:((count*2)+1+k)%ctrl.Number;
		return Raphael.animation({transform: ("...R"+(180+360/ctrl.Number)+","+pos[center][0]+","+pos[center][1])}, ctrl.Speed);
	}
	draw();

style.css

.dg.ac{z-index: 100 !important;}