php - How to increment a bootstrap progress bar? - Stack Overflow

admin管理员组

文章数量:1287281

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%

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%

• php
• javascript
• twitter-bootstrap

Share Improve this question Follow edited Sep 7, 2012 at 14:26 Florent 12.4k1010 gold badges5050 silver badges5858 bronze badges asked Aug 31, 2012 at 15:45 KoalaKoala 5,53344 gold badges2626 silver badges3434 bronze badges 2

• All you have to do is set the width of the progress bar. – Waleed Khan Commented Aug 31, 2012 at 15:47
• change the CSS width propery of #progressbar +1 until you reach 100, a simple loop will do it – Gntem Commented Aug 31, 2012 at 15:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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);
}

The setTimeout approach (as per other answers) is the most mon approach for animating time-based progress.

But I've had a problem with setTimeout if the speed is fast or when I want to reset the bar from 100% to 0%, as the default Bootstrap css transitions lead to undesirable animation effects (i.e takes 0.6 seconds to return to 0%). So I suggest tweaking the transition styling to match the desired animation effect e.g

pb = $('[role="progressbar"]')
// immediate reset to 0 without animation
pb.css('transition', 'none');
pb.css('width', '0%');
// now animate to 100% with setTimeout and smoothing transitions
pb.css('transition', 'width 0.3s ease 0s');
var counter = 0;
var update_progress = function() {
  setTimeout(function() {
    pb.attr('aria-valuenow', counter);
    pb.css('width', counter + '%');
    pb.text(counter + '%');
    if(counter<100) {
      counter++;
      update_progress();
    }
  }, 5 * 1000 / 100); // 5 seconds for 100 steps
};
update_progress();

But if you're in the jQuery camp, then jQuery.animate is I think a neater approach as you can forget having to mess with css transition styling and counting steps etc e.g.

pb = $('[role="progressbar"]')
pb.css('transition', 'none'); // if not already done in your css
pb.animate({
  width: "100%"
}, {
  duration: 5 * 1000, // 5 seconds
  easing: 'linear',
  step: function( now, fx ) {
    var current_percent = Math.round(now);
    pb.attr('aria-valuenow', current_percent);
    pb.text(current_percent+ '%');
  },
  plete: function() {
    // do something when the animation is plete if you want
  }
});

I've put a demo and more discussion on GitHub here.

I'm just learning bootstrap myself and came up with this for advancing it. As mentioned in other answers, the width CSS property appears to be what triggers the animation, but I initially didn't notice it and set the related aria attribute. You probably want to ensure setting the width results in other related attributes getting properly updated if a11y is important to you, setting them as necessary if not.

$( function() {
  var bar = $('div.progress-bar');
  var val = null;

  i1 = setInterval(function() {
    val = parseInt(bar.attr('aria-valuenow'));
    val += 10;
    console.log(val);
    if( val < 101) {
      bar.attr('aria-valuenow', val);
      bar.css('width', val + '%');
    } else {
      clearInterval(i1);
    }
  }, 1000);

});

Try this:

//Find the div you want to update
var divArray = document.getElementById('progressbar');

//Set the width style
divArray.style.width = '100%';

本文标签： phpHow to increment a bootstrap progress barStack Overflow