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

Question

我在我的网站上使用 Bootstrap v3.3.5。

在一个场景中，我在 Bootstrap 模态对话框中显示一个表单。用户填写数据并提交表单。提交表单后，在从服务器收到响应之前，表单看起来是一样的。

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

它应该显示在表单的顶部，并带有消息 "Please wait...your event is being generated." 我在我的代码中添加了一条注释，告诉它应该显示在哪里。

以下是我的 Bootstrap 模态的 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>

点击id为btn_add_event的按钮提交表单时调用的函数如下：

$(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() {}
    });       
  })
});

请帮助我。谢谢

我的问题与其他任何问题都不一样。我不知道如何处理进度条百分比或响应时间的进度。我没有从任何地方得到解决方案。请从我的问题中删除重复的标签。

Answer 1

My question is different than any other question. I don't know how to work the progress bar percentage or progress with the response time. I'm not getting solution for it from anywhere. Please remove the tag of duplicate from my question.

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

的副本

show progressbar while loading pages using jquery ajax in single page website

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

This question had a bounty worth +50 reputation from user2839497.

The question is widely applicable to a large audience. A detailed canonical answer is required to address all the concerns.

I want a canonical answer for this question. I want a working demo of a code which must be integrated with the code I posted in the question. I need the entire working code demo(jsfiddle) for the same. I don't want any reference links for tutorials or anything else. I just want to work the exactly same google styled blue colored progress bar working in my website's ajax function call. Anyhow you make my code working with the necessary other code. Thanks. Waiting keenly for the perfect answer folks. Have a nice day.

并且由于 SO 不是供其用户使用的代码工厂，因此欺骗是解决您问题的绝佳方法。

当问题作为重复问题关闭时，将删除此社区答案。

在post review

之后编辑

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

HTML

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

  }
});

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

How to show a blue colored progress bar exactly like gmail's horizontal blue colored progress bar which is displayed when user submits the form?

javascript

ajax

jquery

loader

twitter-bootstrap