How to realize the special effect of progress bar in HTML5

This article will explain in detail how to achieve the special effects of the progress bar in HTML5. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

HTML5 featured progress bar body {background: # 111; White;} a {color:White;} canvas {background: # 111; frame: 1px solid # 171717; display: block; left: 50%; margin:-51px00-201px; position: absolute; maximum: 50% } varlightLoader= function {var_this=this;this.c=c;this.ctx=c.getContext ('2d'); this.cw=cw;this.ch=ch;this.loaded=0;this.loaderSpeed=0.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= []; this.particleLift=180;this.hueStart=0this.hueEnd=120;this.hue=0;this.gravity=.15;this.particleRate=4 / * initialize / * = * / this.init=function () {this.loop ();}; / * = = * / / * utility functions / * = / = = * / this.rand=function (rMi,rMa) {return~~ (Math.random () * (rMa-rMi+1)) + rMi);}; this.hitTest= function (x1Magi y1LJEN) x2helix2LINGY2LING h3) {return! (x1+w1