Question

103

How to increment a bootstrap progress bar?

rated 0 times [ 106] [ 3] / answers: 1 / hits: 19003 / 12 Years ago, fri, august 31, 2012, 12:00:00

I have just started out with .php/Java can someone show me how to get my bootstrap progress bar to increment in accordance with a users set time.

Progress Bar:

Code:

<div class=progress progress-striped active>



<div id=progressbar class=bar style=width: 0%;></div>

User Input Example:
Code:

Set Seconds:

<input type=text id=speed value=10 /> 



<input type=submit value=Start onclick=doProgress(); />

Java Script {needed}:

Code:

 <script type=text/javascript>

 function doProgress()



 { 



 Idk :( Please help.



 };

 </script>

(style=width: 0%;) Is the progress bars value 100% being maximum.

I want the value to increase in accordance to the users set value in seconds using this element I provided:

<input type=text id=speed value=10 />

example: the user enters 30 I want it to take 30 seconds for the progress bar to reach 100%

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

haylie

Add To Favorites

Follow

Total Points: 26

Total Questions: 108

Total Answers: 104

Location: France

Member since Thu, Oct 27, 2022

2 Years ago

answered 12 Years ago elishaannac · Accepted Answer

Something like this (untested):

function doIncrement(increment) {

  w = parseInt(document.getElementById('progressBar').style.width);

  document.getElementById('progressBar').style.width= (w + increment) +'%';

}



var w

var speed = document.getElementById('speed').value;

var increment = (speed/100);

for(var x = 0; x<speed; x++)

{

  setTimeout(doIncrement(increment),1000);

}