Have a customized progress bar in HTML on click of a button
Question
I am a novice HTML coder and have a silly issue! I want to have a customized progress bar that shows the progress once SUBMIT is clicked. I tried using the tag of HTML, but it did not do the job for me. How can I have an animation like this integrated with my code: http://www.jqueryscript.net/chart-graph/Customizable-Liquid-Bubble-Chart-With-jQuery-Canvas.html#viewSource
I am not able to figure out in what section what code has to be put.
I have tried this,
<!DOCTYPE html>
<html>
<style>
#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}
#myBar {
position: absolute;
width: 10%;
height: 100%;
background-color: #4CAF50;
}
#label {
text-align: center;
line-height: 30px;
color: white;
}
</style>
<body>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar">
<div id="label">10%</div>
</div>
</div>
<br>
<button onclick="move()">Click Me</button>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("label").innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
This doesn't work because I dont want the progress bar to be visible before I click submit.
2 answers
solution1
0 2016-05-25 08:07:24
in #myBar Css Property
Display:none
is Used and in Function Again This Property is Changed to Display:inline by
elem.style.display = "inline";
Here is The Modified Code.
<!DOCTYPE html>
<html>
<style>
#myProgress {
position: relative;
width: 100%;
height: 30px;
background-color: #ddd;
}
#myBar {
position: absolute;
width: 10%;
height: 100%;
background-color: #4CAF50;
display:none; /*Displays None */
}
#label {
text-align: center;
line-height: 30px;
color: white;
}
</style>
<body>
<h1>JavaScript Progress Bar</h1>
<div id="myProgress">
<div id="myBar">
<div id="label"></div>
</div>
</div>
<br>
<button onclick="move()">Click Me</button>
<script>
function move() {
var elem = document.getElementById("myBar");
var label=document.getElementById("label");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.display = "inline"; //Sets Display property to its default value.
elem.style.width = width + '%';
label.innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
solution2
0 2016-05-25 12:54:24
You can use this code if you have jquery 1.8 . In this version of jquery you can get progress of animation using progress property. So you can use animate() instead of setInterval() to do this work. See example
$("button").click(function(){ var width = $(".progress").children("div").width(); if (width == 0){ var percent = $(".progress").data("percent"); $(".progress").children("div").width("0%").show().animate({ "width": percent + "%" }, { duration: 2000, progress: function(a, p) { var newPer = Math.round(percent * p); $(".progress").children("div").html(newPer + "%"); } }); } });
.progress { width: 100%; height: 30px; background-color: #eee; border: 1px solid #ddd; border-radius: 3px; overflow: hidden; } .progress > div { width: 0%; height: 100%; background: #1C90F3; color: #fff; display: none; font-family: tahoma; line-height: 30px; text-align: center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="progress" data-percent="80"> <div></div> </div> <br/> <button>Animate progress</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.