New course! Every coder should learn Generative AI!
Try a free lesson0
How can i make a windows xp loading bar in html
17 Answers
+ 5
I think he mean he want windows xp progress bar....But yours is not xp progress bar
+ 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>
+ 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;
}
+ 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
+ 1
what are you saying?
+ 1
well you have to link the js file and css file with script , link tag .
+ 1
but what is a good HTML app?
0
k I will thx
0
how tho?
0
and it also sort of didn't work...
0
I am saying what he is saying
0
OK thx
0
never mind sorry. how can I make it have more squares?
- 1
it doesn't work with anWriter...
- 1
and how do I get the code to work for HTML? sorry about the questions.
- 1
also may you put that in a link, so I can see if it works for me, please
Often have questions like this?
Learn more efficiently, for free:
Hot today
HTML Module 3 Quiz
1 Votes
Bits
4 Votes
How to cast in python : 2
0 Votes
No connection message
0 Votes
Field name in ef core
0 Votes