Bootstrap progress bar progression

问题:

I am using bootstrap to create my website and I am trying to use a progress bar. What I am trying to do is after I complete a function in PHP (I have 10 functions to do) I advance the progress of the bar by 10%. I believe his is done using java-script but I am unsure on how to do it with bootstrap and my current web searches have not turned up anything I could use. (there are examples of when the page loads progress to 100% but I don't know how these work)

This above is my HTML definition of the bootstrap progress bar. I know changing the width changes the percentage of what is filled in but I don't know how to change it after I have completed a function (functions are all in one page ran one after another).

Could someone help? or point me in the right direction?

回答1:

Prefer using JQuery

$(".bar").css("width", "50%"); 

or in Javascript

var bars = document.getElementsByClassName("bar"); bars[0].style.width = "50%"; 

回答2:

You can change the width of your progress bar like this :

$('.progress-bar').css('width', percentageCompleted + '%'); 

Just keep repeating this whenever the values of percentageCompleted changes, until that value is 100.

---

A demo

var $progress = $('.progress'); var $progressBar = $('.progress-bar'); var $alert = $('.alert');  setTimeout(function() {     $progressBar.css('width', '10%');     setTimeout(function() {         $progressBar.css('width', '30%');         setTimeout(function() {             $progressBar.css('width', '100%');             setTimeout(function() {                 $progress.css('display', 'none');                 $alert.css('display', 'block');             }, 500); // WAIT 5 milliseconds         }, 2000); // WAIT 2 seconds     }, 1000); // WAIT 1 seconds }, 1000); // WAIT 1 second

.progress, .alert {     margin: 15px; }  .alert {     display: none; }

     
 
  
Loading completed!

(see also this Fiddle)

回答3:

If you need to make an animation of progress barr in one step, you can make two lines of code:

$progressBar.animate({width: "100%"}, 100); $progress.delay(1000).fadeOut(500); 

see the demo https://jsfiddle.net/qLgv2Lfm/29/

文章来源: Bootstrap progress bar progression