查看效果:http://keleyi.com/keleyi/phtml/html5/26.htm
完整代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='UTF-8'> 5 <title>HTML5有特色的进度条-柯乐义</title> 6 <base target="_blank" /> 7 <style> 8 body { 9 background: #111; 10 color:White; 11 } 12 a{color:White;} 13 canvas { 14 background: #111; 15 border: 1px solid #171717; 16 display: block; 17 left: 50%; 18 margin: -51px 0 0 -201px; 19 position: absolute; 20 top: 50%; 21 } 22 </style> 23 </head> 24 <body> 25 <script type="text/javascript"> 26 /*==================keleyi.com============================*/ 27 /* Light Loader 28 /*==================柯乐义================================*/ 29 var lightLoader = function (c, cw, ch) { 30 31 var _this = this; 32 this.c = c; 33 this.ctx = c.getContext('2d'); 34 this.cw = cw; 35 this.ch = ch; 36 37 this.loaded = 0; 38 this.loaderSpeed = .6; 39 this.loaderHeight = 10; 40 this.loaderWidth = 310; 41 this.loader = { 42 x: (this.cw / 2) - (this.loaderWidth / 2), 43 y: (this.ch / 2) - (this.loaderHeight / 2) 44 }; 45 this.particles = []; 46 this.particleLift = 180; 47 this.hueStart = 0 48 this.hueEnd = 120; 49 this.hue = 0; 50 this.gravity = .15; 51 this.particleRate = 4; 52 53 /*========================================================*/ 54 /* Initialize 55 /*========================================================*/ 56 this.init = function () { 57 this.loop(); 58 }; 59 60 /*========================================================*/ 61 /* Utility Functions 62 /*========================================================*/ 63 this.rand = function (rMi, rMa) { return ~ ~((Math.random() * (rMa - rMi + 1)) + rMi); }; 64 this.hitTest = function (x1, y1, w1, h1, x2, y2, w2, h2) { return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1); }; 65 66 /*========================================================*/ 67 /* Update Loader 68 /*========================================================*/ 69 this.updateLoader = function () { 70 if (this.loaded < 100) { 71 this.loaded += this.loaderSpeed; 72 } else { 73 this.loaded = 0; 74 } 75 }; 76 77 /*========================================================*/ 78 /* Render Loader 79 /*========================================================*/ 80 this.renderLoader = function () { 81 this.ctx.fillStyle = '#000'; 82 this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight); 83 84 this.hue = this.hueStart + (this.loaded / 100) * (this.hueEnd - this.hueStart); 85 86 var newWidth = (this.loaded / 100) * this.loaderWidth; 87 this.ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 40%, 1)'; 88 this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight); 89 90 this.ctx.fillStyle = '#222'; 91 this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight / 2); 92 }; 93 94 /*========================================================*/ 95 /* Particles 96 /*========================================================*/ 97 this.Particle = function () { 98 this.x = _this.loader.x + ((_this.loaded / 100) * _this.loaderWidth) - _this.rand(0, 1); 99 this.y = _this.ch / 2 + _this.rand(0, _this.loaderHeight) - _this.loaderHeight / 2; 100 this.vx = (_this.rand(0, 4) - 2) / 100; 101 this.vy = (_this.rand(0, _this.particleLift) - _this.particleLift * 2) / 100; 102 this.width = _this.rand(1, 4) / 2; 103 this.height = _this.rand(1, 4) / 2; 104 this.hue = _this.hue; 105 }; 106 107 this.Particle.prototype.update = function (i) { 108 this.vx += (_this.rand(0, 6) - 3) / 100; 109 this.vy += _this.gravity; 110 this.x += this.vx; 111 this.y += this.vy; 112 113 if (this.y > _this.ch) { 114 _this.particles.splice(i, 1); 115 } 116 }; 117 118 this.Particle.prototype.render = function () { 119 _this.ctx.fillStyle = 'hsla(' + this.hue + ', 100%, ' + _this.rand(50, 70) + '%, ' + _this.rand(20, 100) / 100 + ')'; 120 _this.ctx.fillRect(this.x, this.y, this.width, this.height); 121 }; 122 123 this.createParticles = function () { 124 var i = this.particleRate; 125 while (i--) { 126 this.particles.push(new this.Particle()); 127 }; 128 }; 129 130 this.updateParticles = function () { 131 var i = this.particles.length; 132 while (i--) { 133 var p = this.particles[i]; 134 p.update(i); 135 }; 136 }; 137 138 this.renderParticles = function () { 139 var i = this.particles.length; 140 while (i--) { 141 var p = this.particles[i]; 142 p.render(); 143 }; 144 }; 145 146 147 /*========================================================*/ 148 /* Clear Canvas 149 /*========================================================*/ 150 this.clearCanvas = function () { 151 this.ctx.globalCompositeOperation = 'source-over'; 152 this.ctx.clearRect(0, 0, this.cw, this.ch); 153 this.ctx.globalCompositeOperation = 'lighter'; 154 }; 155 156 /*========================================================*/ 157 /* Animation Loop 柯 乐 义 158 /*========================================================*/ 159 this.loop = function () { 160 var loopIt = function () { 161 requestAnimationFrame(loopIt, _this.c); 162 _this.clearCanvas(); 163 164 _this.createParticles(); 165 166 _this.updateLoader(); 167 _this.updateParticles(); 168 169 _this.renderLoader(); 170 _this.renderParticles(); 171 172 }; 173 loopIt(); 174 }; 175 176 }; 177 178 /*========================================================*/ 179 /* Check Canvas Support 180 /*========================================================*/ 181 var isCanvasSupported = function () { 182 var elem = document.createElement('canvas'); 183 return !!(elem.getContext && elem.getContext('2d')); 184 }; 185 186 /*========================================================*/ 187 /* Setup requestAnimationFrame 188 /*========================================================*/ 189 var setupRAF = function () { 190 var lastTime = 0; 191 var vendors = ['ms', 'moz', 'webkit', 'o']; 192 for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 193 window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; 194 window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']; 195 }; 196 197 if (!window.requestAnimationFrame) { 198 window.requestAnimationFrame = function (callback, element) { 199 var currTime = new Date().getTime(); 200 var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 201 var id = window.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall); 202 lastTime = currTime + timeToCall; 203 return id; 204 }; 205 }; 206 207 if (!window.cancelAnimationFrame) { 208 window.cancelAnimationFrame = function (id) { 209 clearTimeout(id); 210 }; 211 }; 212 }; 213 214 /*========================================================*/ 215 /* Define Canvas and Initialize 216 /*========================================================*/ 217 if (isCanvasSupported) { 218 var c = document.createElement('canvas'); 219 c.width = 400; 220 c.height = 100; 221 var cw = c.width; 222 var ch = c.height; 223 document.body.appendChild(c); 224 var cl = new lightLoader(c, cw, ch); 225 226 setupRAF(); 227 cl.init(); 228 } 229 </script> 230 <div style="position:absolute; top: 0;width:100%"> 231 <div class="footer-banner" style="width:728px;margin:10px auto;color:White"> 232 HTML5进度条<br /> 233 请使用<a href="http://keleyi.com/a/bjac/g039tue3.htm">支持HTML5的浏览器</a>查看本页 <a href="http://keleyi.com/a/bjad/8lva67xl.htm">原文</a></div> 234 </div> 235 236 </body> 237 </html>
