HTML5 progress bar effects, html5 progress bar
This article mainly introduces the special effects of HTML5 progress bars. For more information, see
Please use a browser that supports HTML5 to view this special effect
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = 'utf-8'>
<Title> HTML5 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. Fig = 310;
This. loader = {
X: (this. cw/2)-(this. loaderWidth/2 ),
Y: (this. ch/2)-(this. loaderHeight/2)
};
This. Participant = [];
This. Maid = 180;
This. hueStart = 0
This. hueEnd = 120;
This. hue = 0;
This. gravity =. 15;
This. Maid = 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 );
};
/* ===================================================== ============================= */
/* Participant
/* ===================================================== ============================= */
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. Participant lelift)-_ this. Participant lelift * 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. participant. 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. Fig;
While (I --){
This. participant. push (new this. Particle ());
};
};
This. updateParticles = function (){
Var I = this. participant. length;
While (I --){
Var p = this. participant [I];
P. update (I );
};
};
This. renderparticipant = function (){
Var I = this. participant. length;
While (I --){
Var p = this. participant [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. renderparticipant ();
};
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] + 'requestanimationframework'];
Window. cancelAnimationFrame = window [vendors [x] + 'canonicalizationframework'] | window [vendors [x] + 'canonicalrequestanimationframework'];
};
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. height;
Document. body. appendChild (c );
Var cl = new lightLoader (c, cw, ch );
SetupRAF ();
Cl. init ();
}
</Script>
& Lt; div style = "position: absolute; top: 0; width: 100% & gt;
<Div class = "footer-banner" style = "width: 728px; margin: 10px auto; color: White">
HTML5 progress bar
Please use a browser that supports HTML5 to view this page </div>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
