bootstrap Realizes Dynamic Progress Bar Effect

Dynamic progress bar for Bootstrap:

html: Create an modal. It is very simple to use fade to hide modal first, and then embed progress code in modal

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

PS: About Modal Box: If you want to click on the blank space without closing the Modal Box, you can click on the < div class="modal fade" data-backdrop="static" > Here, initialize the parameters of modal, or pass in js

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

js:

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

Explanation: The key point 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 instead of crashing, which can enhance the user experience of the application.

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

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

For the display of percentages, I use Vue. js as a proxy here, and js changes the value of vue. length, indirectly changing the display of foreground percentages. Of course, all roads lead to Rome. There is no best design, only better ideas.