admin管理员组

文章数量:1302887

I am trying to implement these functionalities for progress bar

  1. Implement a loading bar that animates from 0 to 100% in 3 seconds
  2. Start loading bar animation upon a button click
  3. 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 :

/

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. /

I am trying to implement these functionalities for progress bar

  1. Implement a loading bar that animates from 0 to 100% in 3 seconds
  2. Start loading bar animation upon a button click
  3. 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/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/8Lgcfydr/

  • javascript
  • jquery
  • html
  • css
Share edited Oct 1, 2017 at 17:36 Shiladitya 12.2k17 gold badges28 silver badges42 bronze badges asked Sep 27, 2017 at 22:09 XXDebuggerXXDebugger 1,5814 gold badges26 silver badges50 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

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./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>

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis./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.

本文标签： javascriptCreate a new progress bar on a button clickStack Overflow

版权声明：本文标题：javascript - Create a new progress bar on a button click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741662895a2391144.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。