Create a new progress bar on a button click

Question

I am trying to implement these functionalities for progress bar

Implement a loading bar that animates from 0 to 100% in 3 seconds
Start loading bar animation upon a button click
Queue multiple loading bars if the button is clicked more than once. Loading bar N starts animating with loading bar N-1 is done animating.

for 1st:

 $('.progress').animate(
   {
     width:'100%'
   }, 
   {
     duration:3000 
   }        
 );

for 2nd :

function clickme(){
  $('.progress-bar').animate(
    {
      width: '100%' 
    }, 
    {
      duration:3000      
    }        
  );
}

How to implement the last feature ? And is there any method to show the progress in percentage as well. I tried to clone the progress and then append it to the class pp. It didn't work.

var por = $(".progress").clone();
$(".pp").append(por);

The fiddle :

https://jsfiddle.net/amLm9c4o/

Edited : This one is adding the new progress bar but starting all of them consecutively. One more issue I want to show the percentage in the progress bar as well. https://jsfiddle.net/8Lgcfydr/

Answer 1

Here is a method using jQuery queue() and dequeue() . I am checking to see if any previous siblings are animating to run the animation immediately.

 /* Set Container */ var container = $('div.pp'); /* Set Function */ function clickme() { /* Set Progess Bar */ var progressBar = $('<div class="progress-bar"/>'); /* Append Progress Bar to Container and Queue Animation */ container.append(progressBar).queue('example', function() { /* Animate Progress Bar */ progressBar.animate({ width: '100%' }, 3000, function() { /* Run Next Queue */ container.dequeue('example'); }); }); /* Fall Back if Nothing is Animating */ if(!progressBar.prevAll(':animated').length) { container.dequeue('example'); } }

 .progress-bar { height: 20px; background: red; width: 0px; text-align: center; border: 2px solid gray; margin-top: 10px; } .pp{ width : 600px; background-color: #e0e0e0; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <h1>JavaScript Progress Bar</h1> <div class="pp"></div> <br> <button id="add" onclick="clickme()">Add</button>

Answer 2

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <style> .progress-bar { height: 20px; background: red; width: 0px; text-align: center; border: 2px solid gray; } .pp{ width : 600px; background-color: #e0e0e0; } </style> <body> <h1>JavaScript Progress Bar</h1> <div class="pp"> <div class="progress-bar"></div> </div> <br> <button id="add" onclick="clickme()">Add</button> <script> function clickme(){ var div =$("<div class='progress-bar'></div>"); $("body").append(div); $('.progress-bar').animate( { width: '100%' }, { duration: 3000 } ); } </script> </body> </html>

I guess it should provide your need.

Create a new progress bar on a button click

Question

2 answers

solution1
5 ACCPTED 2017-09-27 22:57:56

solution2
3 2017-09-27 22:22:30

Create a new progress bar on a button click

Question

2 answers

solution1 5 ACCPTED 2017-09-27 22:57:56

solution2 3 2017-09-27 22:22:30

solution1
5 ACCPTED 2017-09-27 22:57:56

solution2
3 2017-09-27 22:22:30