这是一个基于HTML5和JavaScript的进度条应用。这个进度条插件很有特点。在显示进度的时候呈现出粒子的动画效果，也就是说，在进度条滑动的同时，一些小粒子会掉下来，效果很酷。还有一个特点就是随着进度的变化，进度条的颜色也会随之变化。JavaScript代码/*========================================================*//*轻型装载机/*==========================================================*/varlightLoader=function(c,cw,ch){var_this=this;这个.c=c;this.ctx=c.getContext('2d');这个.cw=cw;这个.ch=ch;这个.loaded=0;this.loaderSpeed=.6;this.loaderHeight=10;this.loaderWidth=310;this.loader={x:(this.cw/2)-(this.loaderWidth/2),y:(this.ch/2)-(this.loaderHeight/2)};this.particles=[];这个.particleLift=180;this.hueStart=0this.hueEnd=120;这个.hue=0;这个.gravity=.15;这个.particleRate=4;/*========================================================*//*初始化/*==========================================================*/this.init=function(){this.loop();};/*========================================================*//*效用函数/*========================================================*/this.rand=function(rMi,rMa){return~~((Math.random()*(rMa-rMi+1))+rMi);};this.hitTest=function(x1,y1,w1,h1,x2,y2,w2,h2){return!(x1+w1_this.ch){_this.particles.splice(i,1);}};this.Particle.prototype.render=function(){_this.ctx.fillStyle='hsla('+this.hue+',100%,'+_this.rand(50,70)+'%,'+_this.rand(20,100)/100+')';_this.ctx.fillRect(this.x,this.y,this.width,this.height);};this.createParticles=function(){vari=this.particleRate;while(i--){this.particles.push(newthis.Particle());};};this.updateParticles=function(){vari=this.particles.length;while(i--){varp=this.particles[i];p.更新（一）；};};this.renderParticles=function(){vari=this.particles.length;while(i--){varp=this.particles[i];p.render();};};/*========================================================*//*清除画布/*========================================================*/this.clearCanvas=function(){this.ctx.globalCompositeOperation='source-over';this.ctx.clearRect(0,0,this.cw,this.ch);this.ctx.globalCompositeOperation='打火机';};/*========================================================*//*动画循环/*========================================================*/this.loop=function(){varloopIt=function(){requestAnimationFrame(loopIt,_this.c);_this.clearCanvas();_this.createParticles();_this.updateLoader();_this.updateParticles();_this.renderLoader();_this.renderParticles();};循环它（）；};};/*========================================================*//*检查画布支持/*==========================================================*/varisCanvasSupported=function(){varelem=document.createElement('canvas');返回!!(elem.getContext&&elem.getContext('2d'));};/*========================================================*//*设置requestAnimationFrame/*==========================================================*/varsetupRAF=function(){上次时间=0;varvendors=['ms','moz','webkit','o'];for(varx=0;x
