Animasi Loading dengan Jquery

Banyak model ataupun type dari animasi loading yang bisa dibuat dan digunakan, namun menurut saya animasi berikut memiliki keunikan dan tampilan yang cukup menarik.Gimana cara membuatnya??? Ikuti ajah tahapannya...

ISI

css nya : 

1. html, body {  
2.     height: 100%;  
3. }  
4. #container {  
5.     position: absolute;  
6.     top: 0px;  
7.     rightright: 0px;  
8.     leftleft: 0px;  
9.     bottombottom: 0px;  
10.     background-color: #FFF;  
11. }  
12. canvas {  
13.     position: absolute;  
14.     top: 50%;  
15.     leftleft: 50%;  
16.     margin: -75px 0 0 -75px;  
17. }  

Js / Jquery nya :

1. window.requestAnimFrame = (function(callback){   
2.     return window.requestAnimationFrame ||   
3.         window.webkitRequestAnimationFrame ||   
4.         window.mozRequestAnimationFrame ||   
5.         window.oRequestAnimationFrame ||   
6.         window.msRequestAnimationFrame ||   
7.         function(callback){ window.setTimeout(callback, 1000 / 60); }  
8. })();  
9.   
10.   
11. function colorHslToRgb(color){  
12.     var r, g, b, h, s, l;  
13.     h = color.h;  
14.     s = color.s;  
15.     l = color.l;  
16.     if(s == 0){  
17.         r = g = b = l; // achromatic  
18.     }else{  
19.         function hue2rgb(p, q, t){  
20.             if(t < 0) t += 1;  
21.             if(t > 1) t -= 1;  
22.             if(t < 1/6) return p + (q - p) * 6 * t;  
23.             if(t < 1/2) return q;  
24.             if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;  
25.             return p;  
26.         }  
27.   
28.         var q = l < 0.5 ? l * (1 + s) : l + s - l * s;  
29.         var p = 2 * l - q;  
30.         r = hue2rgb(p, q, h + 1/3);  
31.         g = hue2rgb(p, q, h);  
32.         b = hue2rgb(p, q, h - 1/3);  
33.     }  
34.   
35.     color.r = parseInt(r * 255, 10);  
36.     color.g = parseInt(g * 255, 10);  
37.     color.b = parseInt(b * 255, 10);  
38. }  
39.   
40.   
41. function colorRgbToHsl(color){  
42.     var r, g, b;  
43.     r = color.r;  
44.     g = color.g;  
45.     b = color.b;  
46.     r /= 255, g /= 255, b /= 255;  
47.     var max = Math.max(r, g, b), min = Math.min(r, g, b);  
48.     var h, s, l = (max + min) / 2;  
49.   
50.     if(max == min){  
51.         h = s = 0; // achromatic  
52.     }else{  
53.         var d = max - min;  
54.         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);  
55.         switch(max){  
56.             case r: h = (g - b) / d + (g < b ? 6 : 0); break;  
57.             case g: h = (b - r) / d + 2; break;  
58.             case b: h = (r - g) / d + 4; break;  
59.         }  
60.         h /= 6;  
61.     }  
62.     color.h = h;  
63.     color.s = s;  
64.     color.l = l;  
65. }  
66.   
67.   
68. function main() {  
69.     var colors, arcs, w, h, canvas, ctx, x, y, borderWidth, i, r, step,  
70.         startColor, addColor, numStripes;  
71.       
72.     canvas = document.getElementById('canvas');  
73.     ctx = canvas.getContext('2d');  
74.     w = canvas.width;  
75.     h = canvas.height;  
76.     x = w/2;  
77.     y = w/2;  
78.     borderWidth = 5;  
79.     r = 1;  
80.     step = 10;  
81.     numStripes = 4;  
82.     startColor = {  
83.         r: 0,  
84.         g: 153,  
85.         b: 204  
86.     };  
87.       
88.     arcs = [];  
89.     for (i = 0; i < numStripes; i++) {  
90.         addColor = {  
91.             r: startColor.r,  
92.             g: startColor.g,  
93.             b: startColor.b  
94.         };  
95.         arcs.push({  
96.             width: borderWidth,  
97.             color: addColor,  
98.             radius: r,  
99.             x: x,  
100.             y: y,  
101.             offset: 1,  
102.             frameStart: step * i  
103.         });  
104.         r -= .1;  
105.         luminateColor(startColor);  
106.     }  
107.     run(arcs, ctx, canvas, 0, step);  
108. }  
109.   
110. function luminateColor(color) {  
111.     colorRgbToHsl(color);  
112.     color.l += 0.15;  
113.     colorHslToRgb(color);  
114. }  
115.   
116. function clear(ctx, canvas) {  
117.     ctx.clearRect(0, 0, canvas.width, canvas.height);  
118. }  
119.   
120. function run(arcs, ctx, canvas, frame, step) {  
121.     var i, speed, pause, arc, c, newColor;  
122.     speed = 75;  
123.     pause = arcs.length * step + step;  
124.     if (frame === speed + pause) {  
125.         frame = 0;  
126.     } else {  
127.         for(i = 0; i < arcs.length; i++) {  
128.             arc = arcs[i];  
129.             if (!c) {  
130.                 c = {  
131.                     r: arc.color.r,  
132.                     g: arc.color.g,  
133.                     b: arc.color.b  
134.                       
135.                 };  
136.                 colorRgbToHsl(c);  
137.                 c.h += 0.001;  
138.                 if (c.h >= 1) {  
139.                     c.h = .001;  
140.                 }  
141.                 colorHslToRgb(c);  
142.             }  
143.             arc.color = {  
144.                 r: c.r,  
145.                 g: c.g,  
146.                 b: c.b  
147.             };  
148.             luminateColor(c);  
149.         }  
150.     }  
151.     clear(ctx, canvas);  
152.     for (i = 0; i < arcs.length; i++) {  
153.         arc = arcs[i];  
154.         setupArc(arc, ctx, frame, speed);  
155.     }  
156.     requestAnimationFrame(function() {     
157.         frame++;  
158.         run(arcs, ctx, canvas, frame, step);  
159.     });  
160. }  
161.   
162. function getPos(pos, arc, frame, speed) {  
163.       
164.     var animPos, newPos;  
165.       
166.     if (frame < arc.frameStart) {  
167.         frame = 0;  
168.     } else {    
169.         frame -= arc.frameStart;  
170.         if (frame > speed) {  
171.             frame = 0;  
172.         }  
173.     }  
174.     animPos = ((frame/speed) * (Math.PI*2));  
175.     newPos = pos + animPos;  
176.     if (newPos > (Math.PI*2)) {  
177.         newPos -= Math.PI*2;  
178.     }  
179.     return newPos;  
180. }  
181.   
182. function setupArc(arc, ctx, frame, speed) {  
183.     var arcWidth, x, y, radius, color, start, end;  
184.     arcWidth = arc.width;  
185.     color = arc.color;  
186.     x = arc.x;  
187.     y = arc.y;  
188.     radius = (x - arcWidth) * arc.radius;  
189.     start = getPos(arc.offset * Math.PI, arc, frame, speed);  
190.     end = getPos(arc.offset * Math.PI * 2, arc, frame, speed);  
191.     drawArc(ctx, arcWidth, x, y, radius, start, end, color);  
192. }  
193.   
194. function drawArc(ctx, arcWidth, x, y, radius, start, end, color) {  
195.     ctx.closePath();  
196.     ctx.beginPath();  
197.     ctx.lineWidth = arcWidth;  
198.     ctx.strokeStyle = 'rgb('+color.r+','+color.g+','+color.b+')';  
199.     ctx.arc(x, y, radius, start, end, false);  
200.     ctx.stroke();  
201. }  
202.   
203. main();  

Untuk memanggilnya di html :

1. <div id="container">  
2.     <canvas id="canvas" width="150" height="150"></canvas>  
3. </div>  

Sample nya bisa di lihat dibawah ini: