0

How can i make a windows xp loading bar in html

11th May 2017, 2:43 PM
Levi Stubbs
Levi Stubbs - avatar
17 Answers
+ 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
Yanothai Chaitawat - avatar
+ 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
visph - avatar
+ 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
visph - avatar
+ 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
MR Programmer - avatar
+ 1
what are you saying?
11th May 2017, 5:14 PM
MR Programmer
MR Programmer - avatar
+ 1
well you have to link the js file and css file with script , link tag .
11th May 2017, 5:17 PM
MR Programmer
MR Programmer - avatar
+ 1
but what is a good HTML app?
11th May 2017, 5:17 PM
Levi Stubbs
Levi Stubbs - avatar
0
k I will thx
11th May 2017, 5:04 PM
Levi Stubbs
Levi Stubbs - avatar
0
how tho?
11th May 2017, 5:09 PM
Levi Stubbs
Levi Stubbs - avatar
0
and it also sort of didn't work...
11th May 2017, 5:13 PM
Levi Stubbs
Levi Stubbs - avatar
0
I am saying what he is saying
11th May 2017, 5:16 PM
Levi Stubbs
Levi Stubbs - avatar
0
OK thx
12th May 2017, 10:29 AM
Levi Stubbs
Levi Stubbs - avatar
0
never mind sorry. how can I make it have more squares?
12th May 2017, 10:47 AM
Levi Stubbs
Levi Stubbs - avatar
- 1
it doesn't work with anWriter...
11th May 2017, 5:15 PM
Levi Stubbs
Levi Stubbs - avatar
- 1
and how do I get the code to work for HTML? sorry about the questions.
11th May 2017, 5:54 PM
Levi Stubbs
Levi Stubbs - avatar
- 1
also may you put that in a link, so I can see if it works for me, please
12th May 2017, 10:30 AM
Levi Stubbs
Levi Stubbs - avatar