SoFunction
Updated on 2025-02-28

bootstrap achieves dynamic progress bar effect

Bootstrap's dynamic progress bar:

html: Create a modal   Here, use fade to hide the modal first, and then embed the progress code into the modal. It is very simple

<div class="modal fade" data-backdrop="static" tabindex="-1" > 
                      <!--Window Statement：--> 
                      <div class="modal-dialog modal-lg"> 
                        <!-- Content statement --> 
                        <div class="modal-content"> 
                          <!-- main body --> 
                          <div class="modal-body"> 
                            <div class="progress progress-striped active"> 
                              <div  class="progress-bar progress-bar-success" role="progressbar" style="width: 10%;"> 
                                Saving:{{length}}% 
                              </div> 
                            </div> 
                          </div> 
                        </div> 
                      </div> 
                    </div>

PS: About modal box: If you want to click on the blank to not close the modal box, you can initialize the modal parameters here <div class="modal fade" data-backdrop="static">, or pass in js

$('.modal').modal({backdrop: 'static', keyboard: false});Set and open, of course, use whichever is convenient

js:

//Control of progress barfunction startProgerss(){ 
  var trytmp=0; 
  var wait=false; 
  run(); 
  function run(){ 
    if(!wait){ 
      +=(()*10).ceil(); 
    } 
    if(&lt;=98){ 
      if(&gt;80 &amp;&amp; textupover &amp;&amp; imgupover){ 
        =100; 
         $("div[role='progressbar']").css("width","100%"); 
        //Refresh the page after a short delay, it seems that the function of "" is to refresh this page        refreshtohome(1000, ""); 
      }else{ 
        $("div[role='progressbar']").css("width",+"%"); 
        var timer=setTimeout(run,100); 
      } 
    }else{//Waiting time is too long, and other errors may occur.      wait=true;// Enter the waiting state      =99; 
      $("div[role='progressbar']").css("width","99%"); 
      //View the server's response      if(textupover &amp;&amp; imgupover){ 
        =100; 
         $("div[role='progressbar']").css("width","100%"); 
        //Refresh the page after a short delay, it seems that the function of "" is to refresh this page        refreshtohome(1000, ""); 
      } 
      if(++trytmp&lt;10){//Timeout waiting (about 10s)        var timer=setTimeout(run,1000); 
      }else{ 
        alert("The server response failed!"); 
        //Hide progress bar prompt box        $('#progressbar').modal('hide'); 
        //Reset the length of the progress bar        =10; 
      } 
    } 
  } 
}

Explanation: The key is to understand the meaning of the progress bar: give the user a reading bar so that the user can see that the program is in progress rather than crashing, which can enhance the user experience effect of the application.

My above code is designed like this: When submitting a form, call js to display the modal box (equivalent to displaying the progress bar), then js dynamically changes the style (length) of the progress bar and controls a desirable range by yourself.

When the current station receives the response from the background, let the progress bar be loaded to 100%, close the modal box (hide the progress bar), and refresh the data. .

Regarding the display of percentages, I used here to proxy, js changed the value to indirectly change the display of the front-end percentage. Of course, all roads lead to Rome, there is no best design, only better ideas.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.