Shulou(Shulou.com)06/01 Report--

This article focuses on "web front-end development how to achieve the particle progress bar", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "web front-end development how to achieve particle progress bar" it!

This progress bar plug-in is very characteristic, it presents the animation effect of particles when the progress is displayed, that is, when the progress bar slides, it will produce some small particles to fall down, the effect is very cool. Another feature is that the color of the progress bar changes as the progress changes.

JavaScript Code:

/ * = = * / * Light Loader/*===*/var lightLoader = function (c, cw, ch) {var _ this = this; this.c = c; this.ctx = c.getContext ('2d'); this.cw = cw; this.ch = ch; this.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 = []; this.particleLift = 180; this.hueStart = 0 this.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 (x1, y1, w1, H2, x2, y2, w2, h3) {return! (x1 + W1)

< x2 || x2 + w2 < x1 || y1 + h2 < y2 || y2 + h3 < y1);}; /*========================================================*/ /* Update Loader /*========================================================*/ this.updateLoader = function(){ if(this.loaded < 100){ this.loaded += this.loaderSpeed; } else { this.loaded = 0; } }; /*========================================================*/ /* Render Loader /*========================================================*/ this.renderLoader = function(){ this.ctx.fillStyle = '#000'; this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight); this.hue = this.hueStart + (this.loaded/100)*(this.hueEnd - this.hueStart); var newWidth = (this.loaded/100)*this.loaderWidth; this.ctx.fillStyle = 'hsla('+this.hue+', 100%, 40%, 1)'; this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight); this.ctx.fillStyle = '#222'; this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight/2); }; /*========================================================*/ /* Particles /*========================================================*/ this.Particle = function(){ this.x = _this.loader.x + ((_this.loaded/100)*_this.loaderWidth) - _this.rand(0, 1); this.y = _this.ch/2 + _this.rand(0,_this.loaderHeight)-_this.loaderHeight/2; this.vx = (_this.rand(0,4)-2)/100; this.vy = (_this.rand(0,_this.particleLift)-_this.particleLift*2)/100; this.width = _this.rand(1,4)/2; this.height = _this.rand(1,4)/2; this.hue = _this.hue; }; this.Particle.prototype.update = function(i){ this.vx += (_this.rand(0,6)-3)/100; this.vy += _this.gravity; this.x += this.vx; this.y += this.vy; if(this.y >

_ this.ch) {_ this.particles.splice (I, 1);}}; this.Particle.prototype.render = function () {_ this.ctx.fillStyle = 'hsla (' + this.hue+', 100%,'+ _ this.rand (50 this.rand 70) +'%,'+ _ this.rand (20100) / 100 minutes')' _ this.ctx.fillRect (this.x, this.y, this.width, this.height);}; this.createParticles = function () {var I = this.particleRate; while (iMurray -) {this.particles.push (new this.Particle ());};}; this.updateParticles = function () {var I = this.particles.length While (iMel -) {var p = this.particles [I]; p.update (I);};}; this.renderParticles = function () {var I = this.particles.length While (iMurt -) {var p = this.particles [I]; p.render ();};} / * = = * / * Clear Canvas / * = = * / this.clearCanvas = function () {this.ctx.globalCompositeOperation = 'source-over'; this.ctx.clearRect; this.ctx.globalCompositeOperation =' lighter';} / * = = * / * Animation Loop / * = = * / this.loop = function () {var loopIt = function () {requestAnimationFrame (loopIt, _ this.c); _ this.clearCanvas (); _ this.createParticles (); _ this.updateLoader (); _ this.updateParticles (); _ this.renderLoader () _ this.renderParticles ();}; loopIt ();};}; / * = = * / * Check CanvasSupport / * = = * / var isCanvasSupported = function () {var elem = document.createElement ('canvas'); return! (elem.getContext & & elem.getContext (' 2d'));} / * = = * / * Setup requestAnimationFrame/*===*/var setupRAF = function () {var lastTime = 0; var vendors = ['ms',' moz', 'webkit',' o']; for (var x = 0; x < vendors.length & &! window.requestAnimationFrame; + + x) {window.requestAnimationFrame = windowvendors [x] + 'RequestAnimationFrame'] Window.cancelAnimationFrame = new Date [x] + 'CancelAnimationFrame'] | | window [vendors [x] +' CancelRequestAnimationFrame'];}; if (! window.requestAnimationFrame) {window.requestAnimationFrame = function (callback, element) {var currTime = new Date (). GetTime (); var timeToCall = Math.max (0,16-(currTime-lastTime)); var id = window.setTimeout (function () {callback (currTime + timeToCall)) }, timeToCall); lastTime = currTime + timeToCall; return id;};}; if (! window.cancelAnimationFrame) {window.cancelAnimationFrame = function (id) {clearTimeout (id);}; / * = * / * Define Canvas and Initialize/*===*/if (isCanvasSupported) {var c = document.createElement ('canvas'); c.width = 400 C.height = 100; var cw = c.width; var ch = c.width; document.body.appendChild (c); var cl = new lightLoader (c, cw, ch); setupRAF (); cl.init ();} so far, I believe you have a deeper understanding of "web front-end development how to achieve the particle progress bar", you might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.