Il s'agit d'une application de barre de progression basée sur HTML5 et JavaScript. Ce plug-in de barre de progression est tout à fait unique. Il affiche des effets d'animation de particules lors de l'affichage de la progression. l'effet est très cool. Une autre fonctionnalité est qu'à mesure que la progression change, la couleur de la barre de progression changera également.
Code JavaScript
/*================================================= ========*/ /* Chargeur léger/*=================================== ======================*/var lightLoader = function(c, cw, ch){ var _this = this.c = this.ctx; = c.getContext('2d'); this.cw = cw; this.ch = ch; this.loaderSpeed = .6; this.loaderWidth = 310; /2 ) - (this.loaderWidth/2), y : (this.ch/2) - (this.loaderHeight/2) } ; []; this.particleLift = 180; this.hueStart = 0 this.hueEnd = 120; this.gravity = .15; ===============================================*/ / *Initialiser /*================================================= ========*/ this.init = function(){ this.loop(}; == ==================================*/ /* Fonctions utilitaires /*================================================= ========*/ this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);} this.hitTest = fonction(x1, y1, w1, h1, x2, y2, w2, h2){retour !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);} /*================ ========================================*/ /* Chargeur de mise à jour /*== =================================================== ====*/ this.updateLoader = function(){ if(this.loaded < 100){ this.loaded += this.loaderSpeed; } else { this.loaded = 0 } }; ==============================================*/ /* Chargeur de rendu /*================================================= ========*/ 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 }; =================================================== =====*/ /* Particules /*================================================= ========*/ this.Particle = function(){ this.x = _this.loader.x + ((_this.loaded/100)*_this.loaderWidth) - _this.rand(0, 1) ; ceci.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.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; _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(){ var i = this.particleRate; .push(new this.Particle()); }; this.updateParticles = function(){ var i = this.particles.length; while(i--){ var p = this.particles[i]; p.update(i }); this.renderParticles = function(){ var i = this.particles.length; ){ var p = this.particles[i]; p.render( }; /*================================================= ========*/ /* Toile transparente /*=================================== ======================*/ this.clearCanvas = function(){ this.ctx.globalCompositeOperation = 'source-over'; this.ctx.clearRect(0,0,this.cw,this.ch); this.ctx.globalCompositeOperation = 'plus léger' } /*================ =======================================*/ /* Boucle d'animation /*=== =================================================== ===*/ this.loop = function(){ var loopIt = function(){ requestAnimationFrame(loopIt, _this.clearCanvas(); _this.createParticles(); ; _this.renderParticles(); };};/*============================================= == ============*/ /* Vérifier le support Canvas/*============================ === ============================*/var isCanvasSupported = function(){ var elem = document.createElement('canvas') ; retourner !(elem.getContext && elem.getContext('2d'));};/*===================================== == ====================*/ /* Demande de configurationAnimationFrame/*===================== == ==================================*/var setupRAF = function(){ var lastTime = 0; var vendeurs = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendeurs.length && !window.requestAnimationFrame; ++x){ window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame' ]; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; if(!window.requestAnimationFrame){ window.requestAnimationFrame = function(callback, element){ var currTime = new Date().getTime(); max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall }, timeToCall); lastTime = currTime + timeToCall }; if (!window.cancelAnimationFrame = function(id){ clearTimeout(id); *================================================== = =======*/ /* Définir le canevas et Initialiser/*=============================================== == ==========*/if(isCanvasSupported){ var c = document.createElement('canvas'); var ch = c.hauteur; document.body.appendChild(c); var cl = new lightLoader(c, cw, ch); setupRAF();Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.