New course! Every coder should learn Generative AI!
Try a free lesson0
How do I make a progress bar that goes from 0 - 100 automatically?
6 Answers
+ 5
You cannot do this only with html. You have to use a programing language. I have use JavaScript. Here is my simple code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<progress id="pro" value="0" max="100">
</progress>
<button onclick="myfunc()" style="height:40px;width:60px;">Click to start</button>
<script>
function myfunc() {
var elem = document.getElementById("pro");
var id = setInterval(frame, 10);
function frame() {
if (elem.value >= 100) {
clearInterval(id);
} else {
elem.value+=1;
}
}
}
</script>
</body>
</html>
+ 1
did you mean disappear progress bar. use jQuery instead of JavaScript. It will more simple and short.
And by pop up you mean open an external window of your website right? please reply fast. I will write code for that.
+ 1
Hey, here is your code and please ask yourself what do you want. Two question and that progress bar question. Why you ask if you don't need that. My best friend tell right thing you can never satisfy your boss,girl and a guy/girl who does not know what he/she want. Anyway
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<body>
<div id="dat">
<progress id="pro" value="0" max="100">
</progress>
<button onclick="myfunc()" style="height:40px;width:60px;">Click to start</button>
</div>
<script>
function myfunc() {
var elem = document.getElementById("pro");
var id = setInterval(frame, 10);
function frame() {
if (elem.value >= 100) {
clearInterval(id);
$(document).ready(function(){
$("#dat").hide();
window.open("Your url","Window name","height=200,width=300");
});
} else {
elem.value+=1;
}
}
}
</script>
</body>
</html>
+ 1
Sorry, if it hurt you.
0
is there any way I can make it disappear and make my web page pop up?
0
yes that is what I mean
Often have questions like this?
Learn more efficiently, for free:
Hot today
How to cast in python
1 Votes
Python
1 Votes
JavaScript
0 Votes
What happens with this code?
0 Votes
HTML Module 3 Quiz
1 Votes
Field name in ef core
0 Votes