Javascript 如何像gmail一样显示蓝色进度条'；用户提交表单时显示的蓝色水平进度条？

我正在我的网站中使用引导v3.3.5

在一个场景中，我在引导模式对话框中显示一个表单。用户填写数据并提交表单。提交表单后，表单将保持原样，直到从服务器收到响应为止

所以，我想做的是显示一个蓝色水平进度条，与gmail登录后加载收件箱邮件列表时使用的蓝色水平进度条完全相似。这个进度条应该是动态的，就像gmail的进度条一样（也就是说，本质上是渐进的，而不像旋转的圆形加载器图像）

它应该显示在表单的顶部，并显示消息“请稍候…您的事件正在生成”。我在代码中添加了一条注释，告诉它应该准确显示在哪里

以下是我的引导模式的HTML代码：

    <form method="post" action="{$site_url}add_event.php" id="formAddEvent" >
      <!-- The gmail look alike loader should display here only upon successfull submission of a form. -->
      <div class="form-group" id="addEventErrorMsg" style="display:none; color:#FF0000;">
      </div>
      <div class="form-group">
        <input type="text" name="txt_event_title" id="txt_event_title"  autocomplete="off" class="form-control custom-height" placeholder="Event Title" style="height:30px;" />
       </div>
       <div class="form-group">
         <textarea type="text" name="txt_event_description" id="txt_event_description"  autocomplete="off" class="form-control custom-height" placeholder="Description (optional)" style="height:60px;" ></textarea>
       </div>
       <table border="0" cellspacing="10">
         <tr>
           <th><span class="event-title1" style="margin-bottom:5px;">Start Date:</span></th>
           <th><span class="event-title1" style="margin-bottom:5px;">End Date:</span></th>
         </tr>
         <tr>
           <td>
             <div style="margin-right:15px;" class="form-inline form-group event-selection">
             <div class="form-group has-feedback">
               <div class='input-append date form_datetime' data-date="2013-02-21T15:25:00Z">
                 <input type='text' id='event_start_date' name="event_start_date" style="width:225px; display:inline; height:30px;" class="form-control" autocomplete="off" />
                 <span aria-hidden="true" class="glyphicon glyphicon-calendar form-control-feedback"></span>
               </div>
             </div>
           </div>
         </td>
         <td>
           <div class="form-inline form-group event-selection">
             <div class="form-group has-feedback">
               <div class='input-append date form_datetime' data-date="2013-02-21T15:25:00Z">
                 <input type='text' id='event_end_date' name="event_end_date" style="width:225px; display:inline;height:30px;" class="form-control" autocomplete="off" />
                 <span aria-hidden="true" class="glyphicon glyphicon-calendar form-control-feedback"></span>
               </div>
             </div>
           </div>
         </td>
       </tr>
     </table>   
     <div class="form-group has-feedback">
       <input type="text" name="txt_event_location" id="txt_event_location"  autocomplete="off" class="controls form-control custom-height" placeholder="Event Location" style="height:30px;" />
       <span class="glyphicon glyphicon-map-marker form-control-feedback" aria-hidden="true"></span>        
     </div>     
     <div style="clear:both;"> </div>
     <div id="map"></div>
     <div class="form-group">
       <input type="text" name="txt_event_room" id="txt_event_room"  autocomplete="off" class="form-control custom-height" placeholder="Room No." style="height:30px;" />
     </div>
     <div class="form-group">
       <div id="custom-templates">
         <input class="typeahead form-control custom-height" id="selected_groupname" name="selected_groupname" type="text" placeholder="Invite Group" value="{foreach from=$user_group_list1 item=grouplist key=key} {if $groupId==$grouplist.page_id} {$grouplist.title} {/if} {/foreach}">
         <input type="hidden" name="selected_groupid" id="selected_groupid" value=""  />
       </div>
     </div>        
     <div class="modal-footer text-center">
       <button class="btn btn-primary" id="btn_add_event" type="button">Add Event</button>
       <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
     </div>
   </form>

请帮帮我。谢谢

我的问题不同于任何其他问题。我不知道如何计算进度条百分比或响应时间进度。我从任何地方都找不到解决办法。请从我的问题中删除重复标记

我的问题不同于任何其他问题。我不知道该怎么做 根据响应时间计算进度条百分比或进度。 我从任何地方都找不到解决办法。请取下标签 从我的问题重复

不，它没有什么不同，因此它是

唯一的区别是你在赏金通知上说

这个问题在用户2839497中获得了价值+50的赏金声誉

这个问题广泛适用于广大听众。详细的 需要规范的答案来解决所有问题

我想要一个关于这个问题的标准答案。我想要一个工作演示 必须与我发布在 问题。我需要完整的工作代码演示（JSFIDLE）来实现同样的功能。 我不想要任何教程或其他任何参考链接。我 我只是想用谷歌风格的蓝色进度 bar在我的网站的ajax函数调用中工作。不管怎样，你让我 代码与必要的其他代码一起工作。谢谢热切地等待 这是一个完美的答案。祝你今天愉快

由于SO不是供用户使用的代码工厂，所以dupe是解决您的问题的一个极好的方法

当问题作为副本关闭时，此社区答案将被删除

---

编辑后

此代码段显示进度条的基本部分

HTML

---

您可以使用规范中的事件，另一种方法是将响应从服务器回送到客户端，并根据响应更新进度。。。假设您有一个switch语句和5个case（0-5），您在服务器上回显表示阶段1的0，然后回显表示下一阶段的1，以便更改进度条的值。@Tasos：我想显示与gmail的蓝色进度条完全相似的蓝色进度条。它的必要代码应该适合我给出的代码。您提供的问题链接与我想要实现的完全不同。@jordavis：谢谢您的评论。如果您可以对我在问题中发布的代码进行必要的更改，将其作为答案发布，如果可能，您可以创建一个对我有很大帮助的工作演示。再次感谢。我还想说，你已经成为会员这么长时间了，应该知道你问的不是你做的，因此我觉得你仍然这样做很奇怪。我真的希望你改变对这个问题的要求，而不是要求一个完全有效的代码，因为在这里，我们花费了大量的个人时间来帮助解决问题，而不是为某人做工作。LGSon，“也许你应该跟随我的领导，删除你的答案，以支持我上面写的和评论”。我同意LGSon，并删除了我的答案。OP的要求公然违反SO政策。虽然此链接可能会回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能无效。-@A第3页第1页。我完全同意，对于外部链接，虽然与我的链接的主要区别是它是一个SO帖子，因此它有一个内部参考使它不会发生。2.这是一篇维基文章，我希望它只会持续到问题被投票以重复的形式结束。3.我将此问题标记为结束，因为它是重复的，并且有超出SO政策的要求/需求。4.我不介意在这个问题的悬赏期满后立即删除它，这样它就可以被视为一个没有悬赏的问题。

$(document).ready(function() {
  $("#btn_add_event").click(function() {

    var strSeriaze = $( "#formAddEvent" ).serialize();
    url = $( "#formAddEvent" ).attr('action');
    $("#btn_add_event").attr('disabled', 'disabled');
    $("#addEventErrorMsg").html('');
    $.ajax({
      url  : url,
      type : "POST",
      data :  {postData:strSeriaze},
      beforeSend: function() {
        $('#loader-icon').show();
      },
      complete : function() {
        $('#loader-icon').hide();
      },
      success : function(data) {
       // $("#events-result").append(data);
       $('#loader-icon').hide();

       if(data == true) {
         $("#myModal-add-event").modal('hide');
         $("#myModal-add-event").hide();
         //window.location = site_url + "event_index.php";
         window.location.href = site_url + "event_index.php";
         return false;
        } else {
          $("#btn_add_event").attr('disabled', false);
          $("#addEventErrorMsg").show();
          $("#addEventErrorMsg").html(data);
        }
      },
      error: function() {}
    });       
  })
});   

<div class="progress-bar"></div>

function set_pbar(p) {  
  $('.progress-bar').css({ width:(p * 100)+'%'});
}

$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {

        //Sending in progress, divided with 2 make bar 50% wide after sending
        set_pbar(evt.loaded / evt.total / 2);

      }
    }, false);
    xhr.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {

        //Receiving in progress, dividing with 2 and adding 0.5 make bar start at 50%
        set_pbar(0.5 + (evt.loaded / evt.total / 2));

      }
    }, false);
    return xhr;
  },
  url: "/echo/json/",
  type: 'POST',
  data: {json: JSON.stringify(new Array(100000))},
  success: function(data){

    //Loaded...

  }
});