How can i make a windows xp loading bar in html

windows xp

11th May 2017, 2:43 PM

Levi Stubbs

17 ответов

+ 5

http://www.dynamicdrive.com/dynamicindex11/xpprogressbar.htm

11th May 2017, 3:35 PM

visph

+ 5

I think he mean he want windows xp progress bar....But yours is not xp progress bar

11th May 2017, 5:16 PM

Yanothai Chaitawat

+ 4

@Levi Stubbs: The @MR Programmer code works very well with anWritter ( free ), if you instegrate to Html correctly the Css and the JS part ^^ This can be do by two ways: - link independant files with css and/or js content in the <head> part - embed css and/or js in the <head> part The last solution will get: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Win XP</title> <style> body{ background-color: #000; } #mycanvas{ background-color: #000; border-color: #fff; border-radius: 5px 5px 5px 5px; border-style: solid; width: 200px; height: 30px; } </style> <script> //do not steal (C) Mr Programmer var canvas;//Canvas var ctx;//Context var speed = 12;//Speed of Progress Bar var x = -170; var delay=10000; var tmp=0; var clk;//clock function Load() { canvas = document.getElementById("mycanvas"); ctx = canvas.getContext("2d"); ctx.fillStyle ="#5718FC"; clk= setInterval(draw,100); } function rects(x){ ctx.fillRect(x,15,50,canvas.height-30); ctx.fillRect(x+55,15,50,canvas.height-30); ctx.fillRect(x+110,15,50,canvas.height-30); } function draw(){ if(tmp==delay )clearInterval(clk); ctx.clearRect(0,0,canvas.width,canvas.height); rects(x); x = x>canvas.width+5 ? -170:x+10; tmp+=100; } </script> </head> <body onload="Load();"> <canvas id="mycanvas"></canvas> </body> </html>

12th May 2017, 12:43 AM

visph

+ 4

If you want a different number of square, modify the script by this way: - add this first line, and modify the two next: var nsquare=4; // number of squares var x = -55*nsquare-5; var delay=Infinity; // infinte animation - replace the rects() function by: function rects(x){ for (var i=0; i<nsquare; i++) ctx.fillRect(x+55*i,15,50,canvas.height-30); } - modify the draw() function as: function draw(){ if (tmp>=delay) clearInterval(clk); // tmp>=deley is more safe than tmp==delay ^^ ( not mandatory but better ) ctx.clearRect(0,0,canvas.width,canvas.height); rects(x); x = x>canvas.width+5 ? -55*nsquare-5:x+10; // this is modified also ( required for variable squares number ) tmp+=100; }

12th May 2017, 1:14 PM

visph

+ 2

I build one for you. change the position of canas to change the location of progress bar. https://code.sololearn.com/W6g1I55ancVj/?ref=app

11th May 2017, 4:32 PM

MR Programmer