Menu
I have html code. And i need some javascript code for update value on every iteration
<progress id="progressBar" max="100" value="0"></progress>
for (i = 0; i <= 100; i ++) {
//update progress bar
}
I try to do something like this:
var progressBar = document.getElementById("progressBar");
progressBar.value += i;
But this not work. It update progress bar when loop finish.
784
Customizing a ProgressBar requires defining the attribute or properties for the background and progress of your progress bar. You can do this in the XML file or in the Activity (at run time). @hirengamit res is "Resource". Your error is probably indicating that the file cannot be found.
$("progress"). val(i); will change the progress value base on value i .
On the Custom HTML tab scroll to the very bottom of the HTML and find the following code: [template("progress bar")]. This is the progress bar merge code. You can choose to copy or cut this code from its current location at the bottom of the page.
I struggled with this for several days, and finally put what I had learned into the following fairly simple solution, which puts a button and a progressbar on an HTML page.
When the button is clicked, javascript starts a count, and updates the progress bar as the count progresses. The count is set to a default value of 4321 in the button definition, but you can change it to any value you choose.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Progress Bar Demo</title>
<script>
var button;
var count;
var countmax;
var progressbar;
var timerID;
function start(max) {
button = document.getElementById("button");
count = 0;
countmax = max;
progressbar = document.getElementById("bar");
progressbar.max = countmax;
timerID = setInterval(function(){update()},10);
}//end function
function update() {
button.innerHTML = "Counting to " + countmax;
count = count + 100;
progressbar.value = count;
if (count >= countmax) {
clearInterval(timerID);
button.innerHTML = "Ready";
progressbar.value = 0;
}//end if
}//end function
</script>
</head>
<body>
<p>
<button onclick="start(4321)" id="button" style="font-size:18px;">Ready</button><br>
<br>
<progress id="bar" value="0"></progress>
</p>
</body>
</html>
I would do it like that for a dummy progressbar :
Html
<div id="progress">
<span class="progress-text"></span>
<div class="progress-bar"></div>
</div>
Css
#progress {
position:relative;
width:250px;
height:20px;
border:1px solid red;
}
#progress .progress-bar {
background:blue;
height:20px;
width:0%;
display:inline-block;
}
#progress .progress-text {
position:absolute;
z-index:2;
right:0;
}
JQuery
$(document).ready(function() {
var progression = 0,
progress = setInterval(function()
{
$('#progress .progress-text').text(progression + '%');
$('#progress .progress-bar').css({'width':progression+'%'});
if(progression == 100) {
clearInterval(progress);
alert('done');
} else
progression += 10;
}, 1000);
});
jsFiddle
You could use the JQueryUI Progressbar too !
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
