Mootools : Loading Canvas : Circles

2013-06-03
Kevin Lancien
The canvas tag allows good things. On our website, you can experience this tag on multiple pages, and also as a loading which allows us to make you wait for a resource to load :)
 
Here is our class JS (MooTools) to generate our loading, with some customisable options: size, color and fps.
 
This class creates a canvas in memory, that you can inject  into your page, or draw in another canvas. Here is the JS code:
 
var Loading = new Class({
||t||Implements: [Events, Options],

||t||options: {
||t||||t||'size' : 100,
||t||||t||'color' : '#ffffff',
||t||||t||'fps':60
||t||},

||t||initialize: function(options){
||t||||t||this.setOptions(options);
||t||||t||this.canvas = new Element('canvas', {'width' : this.options.size, 'height' : this.options.size});
||t||||t||if (this.canvas.getContext){
||t||||t||||t||this.ctx = this.canvas.getContext("2d");
||t||||t||||t||this.enabled = true;

||t||||t||||t||this.ctx = this.canvas.getContext("2d");
||t||||t||||t||this.radian = Math.PI/180;
||t||||t||||t||this.counter = 0;
||t||||t||||t||this.direction = 1;

||t||||t||||t||this.ctx.strokeStyle = (this.options.color.test(/\#[A-Fa-f0-9]{6}/)) ? this.options.color : '#fff';
||t||||t||||t||this.ctx.lineCap = 'round';
||t||||t||||t||this.ctx.lineWidth = Math.floor(this.options.size/100*5);

||t||||t||||t||this.startAnimation();
||t||||t||}else{
||t||||t||||t||this.enabled = false;
||t||||t||||t||return true;
||t||||t||}
||t||},

||t||drawCircles: function(){
||t||||t||this.ctx.save();
||t||||t||this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

||t||||t||this.ctx.translate(this.canvas.width/2, this.canvas.height/2);

||t||||t||this.drawCircle((this.options.size/12)*1, 3*(Math.PI/2), Math.PI/2, this.counter, 29);
||t||||t||this.drawCircle((this.options.size/12)*2, 3*(Math.PI/2), Math.PI/2, this.counter, 37);
||t||||t||this.drawCircle((this.options.size/12)*3, 2*(Math.PI), 4*Math.PI/5, -this.counter, 16);
||t||||t||this.drawCircle((this.options.size/12)*4, 3*(Math.PI/2), Math.PI/2, this.counter, 12);
||t||||t||this.drawCircle((this.options.size/12)*5, 3*(Math.PI/2), Math.PI/2, -this.counter, 26);

||t||||t||this.counter++;
||t||||t||this.ctx.restore();
||t||},

||t||drawCircle: function(radius, angleStart, angleEnd, direction, speed){
||t||||t||var angleDisplacementUnit = this.radian * (speed / 5 );
||t||||t||this.ctx.beginPath();
||t||||t||this.ctx.arc(0, 0, radius, (angleDisplacementUnit * direction + angleStart), (angleDisplacementUnit * direction + angleEnd), true);
||t||||t||this.ctx.stroke();
||t||},

||t||stopAnimation: function(){
||t||||t||clearInterval(this.timer);
||t||},

||t||startAnimation: function(){
||t||||t||this.timer = this.drawCircles.periodical(1000/this.options.fps, this);
||t||}
});

Followed by instantiation, where you can specify the options you want. (The code that generates a random color is just for demo :) 

window.addEvent('domready', function(){
||t||$$('.box').each(function(box, index){
||t||||t||var loading = new Loading({
||t||||t||||t||'size' : 50 + 15 * index,
||t||||t||||t||'color' : getRandomHexa(),
||t||||t||||t||'fps' : 30 + 5 * index
||t||||t||});
||t||||t||loading.canvas.inject(box);
||t||});
});

var colorChars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
function getRandomHexa(){
||t||var hexa = '#';
||t||for (var i = 0; i < 6; i++)
||t||||t||hexa += colorChars.getRandom();
||t||return hexa;
}

 

Download demo/source files

Download

Comment

USER EXPERIENCE

Wandi invites you to discover a new approach to navigating a website...
Are you ready?

Launch the experience