Javascript 在按钮上创建新的进度条单击

我正在尝试为进度条实现这些功能

实现一个加载条，在3秒内从0%到100%设置动画 单击按钮后开始加载工具栏动画 如果多次单击按钮，请将多个加载条排队。加载条N开始设置动画，加载条N-1完成动画设置。 第一次：

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

第二名：

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

如何实现最后一个功能？ 还有什么方法可以用百分比来表示进度呢。 我试图克隆进度，然后将其附加到类pp中。但没有成功

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

小提琴：

编辑： 这是添加新的进度条，但会连续启动所有进度条。 还有一个问题，我想在进度条中显示百分比。

.进度条{ 高度：20px； 背景：红色； 宽度：0px； 文本对齐：居中； 边框：2倍纯色灰色； } .pp{ 宽度：600px； 背景色：E0； } JavaScript进度条 添加 函数clickme{ var div=$； $body.appenddiv； $'.progress bar'。设置动画 { 宽度：“100%” }, { 持续时间：3000 } ; } .进度条{ 高度：20px； 背景：红色； 宽度：0px； 文本对齐：居中； 边框：2倍纯色灰色； } .pp{ 宽度：600px； 背景色：E0； } JavaScript进度条 添加 函数clickme{ var div=$； $body.appenddiv； $'.progress bar'。设置动画 { 宽度：“100%” }, { 持续时间：3000 } ; } 下面是一个使用jQuery和的方法。我正在检查以前的兄弟姐妹是否正在制作动画以立即运行动画

/*集合容器*/ var容器=$'div.pp'； /*集合函数*/ 函数clickme{ /*设置进度条*/ var progressBar=$； /*将进度条附加到容器和队列动画*/ container.appendprogressBar.queue'example'，函数{ /*为进度条设置动画*/ progressBar.animate{width:'100%}，3000，函数{ /*运行下一个队列*/ container.dequeue'example'； }; }; /*如果没有设置动画，请后退*/ if！progressBar.prevAll'：动画长度{ container.dequeue'example'； } } .进度条{ 高度：20px； 背景：红色； 宽度：0px； 文本对齐：居中； 边框：2倍纯色灰色； 边缘顶部：10px； } .pp{ 宽度：600px； 背景色：E0； } JavaScript进度条 Add这里有一个使用jQuery和的方法。我正在检查以前的兄弟姐妹是否正在制作动画以立即运行动画

/*集合容器*/ var容器=$'div.pp'； /*集合函数*/ 函数clickme{ /*设置进度条*/ var progressBar=$； /*将进度条附加到容器和队列动画*/ container.appendprogressBar.queue'example'，函数{ /*为进度条设置动画*/ progressBar.animate{width:'100%}，3000，函数{ /*运行下一个队列*/ container.dequeue'example'； }; }; /*如果没有设置动画，请后退*/ if！progressBar.prevAll'：动画长度{ container.dequeue'example'； } } .进度条{ 高度：20px； 背景：红色； 宽度：0px； 文本对齐：居中； 边框：2倍纯色灰色； 边缘顶部：10px； } .pp{ 宽度：600px； 背景色：E0； } JavaScript进度条

---

AddNot真的，它正在复制第一个进度条，如果我反复单击add按钮，新的进度条将连续启动。我希望他们一旦开始前一个完成100%队列多个加载栏，如果按钮被点击多次。加载栏N开始动画，加载栏N-1完成动画制作。不是真的，它复制了第一个进度栏，如果我反复单击“添加”按钮，新的进度栏将连续启动。我希望他们一旦开始前一个完成100%队列多个加载栏，如果按钮被点击多次。加载条N开始设置动画，加载条N-1完成动画设置。