See this effect using a browser that supports HTML5
The
code is as follows:
<! DOCTYPE html>
<html>
<head>
<meta charset= ' UTF-8 ' >
<TITLE>HTML5 features a progress bar </title>
<base target= "_blank"/>
<style>
Body {
background: #111;
Color:white;
}
A{color:white;}
Canvas {
background: #111;
border:1px solid #171717;
Display:block;
left:50%;
margin: -51px 0 0-201px;
Position:absolute;
top:50%;
}
</style>
</head>
<body>
<script type= "Text/javascript" >
/*==============================================*/
/* 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, H1, X2, y2, W2, H2) {return! X1 + W1 < x2 | | X2 + W2 < x1 | | Y1 + h1 < y2 | | y2 + H2 < 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 (m) + '%, ' + _this.rand (20, 100)/100 + ') ' ;
_this.ctx.fillrect (this.x, This.y, This.width, this.height);
};
this.createparticles = function () {
var i = this.particlerate;
while (i--) {
This.particles.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;
while (i--) {
var p = this.particles[i];
P.render ();
};
};</p> <p>/*========================================================*/
/* Clear Canvas
/*========================================================*/
This.clearcanvas = function () {
this.ctx.globalCompositeOperation = ' source-over ';
this.ctx.clearRect (0, 0, THIS.CW, this.ch);
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 Canvas Support
/*========================================================*/
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 = 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 ();
var timetocall = Math.max (0-(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.height;
Document.body.appendChild (c);
var cl = new Lightloader (c, CW, CH);
Setupraf ();
Cl.init ();
}
</script>
<div style= "Position:absolute; top:0;width:100% ">
<div class= "Footer-banner" style= "width:728px;margin:10px auto;color:white" >
HTML5 progress bar
Please use the browser that supports HTML5 to view this page </div>
</div>
</body>
</html>
