Ajax Loader
HTML 
<canvas id="canvas"></canvas>
1
<canvas id="canvas"></canvas>
 
CSS 
body {
1
body {
2
  background-color: #666;
3
  margin: 0;
4
  padding: 0;
5
  width: 100%;
6
}
7
 
8
#canvas{
9
  background-color: black;
10
}
 
JavaScript 
window.onload = function(){
1
window.onload = function(){
2
  var canvas = document.getElementById("canvas"),
3
    ctx = canvas.getContext("2d"),
4
    FPS = 24,
5
    FRAME_MSEC = 1000 / FPS >> 0,
6
    count = 0,
7
    max = 500, // iterations before shade change
8
    shade = 0;
9
 
10
  canvas.width = window.innerWidth;
11
  canvas.height = window.innerHeight;
12
13
  ctx.moveTo(0, 0);
14
  ctx.strokeStyle = 'white';
15
 
16
  setInterval(intervalHandler, FRAME_MSEC);
17
 
18
  function intervalHandler(){
19
    count++;
20
 
21
    if(count%max === 0){
22
      shade = random(255);
23
 
24
      // set new stroke color and start new path
25
      ctx.strokeStyle = "rgb("+shade+","+shade+","+shade+")";
26
      ctx.beginPath();
27
    };
28
 
29
    ctx.lineTo(canvas.width, random(canvas.height));
30
    ctx.lineTo(random(canvas.width), canvas.height);
31
    ctx.lineTo(0, random(canvas.height));
32
    ctx.lineTo(random(canvas.width), 0);
33
34
    ctx.stroke();
35
  };
36
 
37
  // helper function for random numbers
38
  // returns a random integer between 0 and n
39
  function random(n){
40
    return Math.floor(Math.random() * n);
41
  };
42
};
 

Web

CSSDeck G+