Ajax Loader
HTML
<canvas id="canvas"></canvas>
1
<canvas id="canvas"></canvas>
 
CSS
html {
1
html {
2
  height: 100%;
3
}
4
body{
5
  padding: 0; margin: 0;
6
  min-height: 400px; height: 100%;
7
  width: 100%;
8
  overflow: hidden;
9
}
 
JavaScript
// shim layer with setTimeout fallback
1
// shim layer with setTimeout fallback
2
window.requestAnimFrame = (function(){
3
  return  window.requestAnimationFrame       || 
4
      window.webkitRequestAnimationFrame || 
5
      window.mozRequestAnimationFrame    || 
6
      window.oRequestAnimationFrame      || 
7
      window.msRequestAnimationFrame     || 
8
      function( callback ){
9
      window.setTimeout(callback, 1000 / 60);
10
      };
11
})();
12
 
13
var canvas = document.getElementById("canvas"),
14
  ctx = canvas.getContext("2d"),
15
  W = window.innerWidth,
16
  H = window.innerHeight,
17
  circles = [];
18
 
19
canvas.width = W;
20
canvas.height = H; 
21
 
22
//Random Circles creator
23
function create() {
24
  
25
  //Place the circles at the center
26
  
27
  this.x = W/2;
28
  this.y = H/2;
29
 
30
  
31
  //Random radius between 2 and 6
32
  this.radius = 2 + Math.random()*3; 
33
  
34
  //Random velocities
35
  this.vx = -5 + Math.random()*10;
36
  this.vy = -5 + Math.random()*10;
37
  
38
  //Random colors
39
  this.r = Math.round(Math.random())*255;
40
  this.g = Math.round(Math.random())*255;
41
  this.b = Math.round(Math.random())*255;
42
}
43
 
44
for (var i = 0; i < 500; i++) {
45
  circles.push(new create());
46
}
47
 
48
function draw() {
49
  
50
  //Fill canvas with black color
51
    ctx.globalCompositeOperation = "source-over";
52
    ctx.fillStyle = "rgba(0,0,0,0.15)";
53
    ctx.fillRect(0, 0, W, H);
54
  
55
  //Fill the canvas with circles
56
  for(var j = 0; j < circles.length; j++){
57
    var c = circles[j];
58
    
59
    //Create the circles
60
    ctx.beginPath();
61
    ctx.arc(c.x, c.y, c.radius, 0, Math.PI*2, false);
62
        ctx.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 0.5)";
63
    ctx.fill();
64
    
65
    c.x += c.vx;
66
    c.y += c.vy;
67
    c.radius -= .02;
68
    
69
    if(c.radius < 0)
70
      circles[j] = new create();
71
  }
72
}
73
 
74
function animate() {
75
  requestAnimFrame(animate);
76
  draw();
77
}
78
 
79
animate();
 

Particles Explosion with HTML5 Canvas

CSSDeck G+