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?

Question

I'm using Bootstrap v3.3.5 in my website.

In one scenario I'm displaying a form in Bootstrap modal dialog. User fills in the data and submits the form. After submitting the form the form looks as it is until the response is received from the server.

So, what I want to do is display a blue colored horizontal progress bar exactly resembling the blue colored horizontal progress bar which gmail uses when it loads the inbox mail list after login. This progress bar should be dynamic like gmail's progress bar(i.e. progressive in nature and not like revolving circle loader image).

It should be displayed at the top of form with the message "Please wait...your event is being generated." I've added a comment in my code telling where it should be displayed exactly.

Following is my Bootstrap modal's HTML code:

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

The function which gets called for form submission upon clicking on button with id btn_add_event is as follows:

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

Please help me. Thanks.

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.

You can use the events from the spec https://xhr.spec.whatwg.org/#interface-progressevent the other way you can do it is to echo responses from the server to the client-side and update the progress based on the response... so say you have a switch statement and 5 cases (0-5) you echo 0 which represents stage 1 on the server then you echo 1 which is the next stage so you change the value of the progress bar. — Jordan Davis, Dec 30 '15 at 12:54
http://stackoverflow.com/questions/20095002/how-to-show-progress-bar-while-loading-using-ajax — Tasos, Dec 30 '15 at 12:59
@Tasos:I want to show the blue colored progress bar that exactly resembles gmail's blue colored progress bar. The necessary code for it should get fit within the code I given. The question link you provided has nothing like what I want to achieve. — PHPLover, Dec 30 '15 at 13:10
@JordanDavis: Thanks for you comment. If you could make the necessary changes to the code I posted in my question, post it as an answer and if possible could create a working demo of it that would be of great help to me. Thanks once again. — PHPLover, Dec 30 '15 at 13:15
the hard part is to get the measurement of the ajax call. the easy part is to animate the progress -- just one line of code -- https://jsfiddle.net/8bxcndmk/ — Tasos, Dec 30 '15 at 13:21
Possible duplicate of [Twitter bootstrap progress bar animation on page load](http://stackoverflow.com/questions/10007212/twitter-bootstrap-progress-bar-animation-on-page-load) — Henrique Barcelos, Dec 30 '15 at 13:21
@HenriqueBarcelos:At the end of question I've explained how my question is different than other questions. — PHPLover, Dec 30 '15 at 13:26
by the way in that link in my 1st comment did you go here -- http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/ -- link provided in 1st answer -- you can clearly see a percentage monitoring for ajax post requests — Tasos, Dec 30 '15 at 13:28
@user2839497 yea no prob! and just to let you know JQuery doesn't have full support of the entire event spec, they eliminate the more confusing events so it's easier to understand, I'll show you exactly in pure JS first for clarity. — Jordan Davis, Dec 30 '15 at 13:28
@Tasos:How to do that? and hey you can refer the link Henrique Barcelos just provided. It exactly has the same loader as of gmail. I want to integrate the same loader into my code. If you could do it please post the whole working modified code as your answer so that I can accept it as an answer and upvote the answer. Thank you so much. Waitng for your reply keenly. — PHPLover, Dec 30 '15 at 13:29
Please refer to [this thread](http://stackoverflow.com/questions/20775349/how-to-bind-a-progress-and-update-event-to-an-ajax-request-when-uploading-a-fi) to see how can you track progress of an ajax request. — Henrique Barcelos, Dec 30 '15 at 13:31
it will look something like this, so test it with your own url -- https://jsfiddle.net/o47j31tc/ — Tasos, Dec 30 '15 at 13:38
@Tasos:Sorry but your fiddle is not working. It's not displaying anything. Even I tried by clicking on Run button but still nothing happens. Code is getting displayed. — PHPLover, Dec 30 '15 at 13:41
really its not working. i dont have a post URL so its eroring. i clearly said to you "test it with your own url" in my last comment — Tasos, Dec 30 '15 at 13:46
@Tasos:I tried your code with my URl and incorporating in my AJAX function call but still same is the result. — PHPLover, Dec 31 '15 at 02:19
then use an alternative like a loader -- on complete hide it --- http://codepen.io/collection/HtAne/ — Tasos, Dec 31 '15 at 03:23
@user2839497 SO is not a code factory where you get your work done. The minimum requirement is a working code snippet so we can see what works and what doesn't, at least on bigger code chunks as yours, and from there we gladly give assist on how to solve the issue, by either explaining and/or showing. — Asons, Jan 02 '16 at 10:34
@user2839497 I updated my answer with a working progress bar applied to your code base, with some limitations though, as I can't load/post to any page of yours. — Asons, Jan 02 '16 at 11:05
@user2839497 May I ask if you down voted my answer? .. And if so, why? — Asons, Jan 02 '16 at 11:43
As this is definitely a duplicate I deleted my personal answer to make room for a community wiki answer. — Asons, Jan 03 '16 at 16:31
I also want to say, you've been a member such a long time and should know that what you ask is not what SO does, and therefore I find it quite strange that you still do. I really hope you change the requirements on this question, not demand a fully working code, as here we spend a lot of personal time to help out how to solve, not do the work for someone. — Asons, Jan 03 '16 at 16:43
May be worth checking out something like http://usablica.github.io/progress.js/ — anthony-dandrea, Jan 08 '16 at 22:57
Possible duplicate of [show progressbar while loading pages using jquery ajax in single page website](http://stackoverflow.com/questions/15328275/show-progressbar-while-loading-pages-using-jquery-ajax-in-single-page-website) — Asons, Jan 10 '16 at 12:32

score 2 · Accepted Answer · edited May 23 '17 at 10:28

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.

No it's not different, and therefore it is duplicate of

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

The only difference is that in your bounty notice you said

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.

and as SO is not a code factory to its users disposal, the dupe is an excellent way to solve your question.

This community answer is intended to be deleted when the question is closed as a duplicate.

Edit after post review

This code snippet shows the essential part for a progress bar.

HTML

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

Script

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

  }
});

LGSon, "Maybe you should follow my lead, delete your answer too, to support what I wrote and commented above". I agree with LGSon and have deleted my answer. OP's requests blatantly goes against SO policy. — zer00ne, Jan 03 '16 at 18:47
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/10828861) — AtheistP3ace, Jan 09 '16 at 02:47
@AtheistP3ace 1. I agree completely, for external links, though the main difference with my link is it is a SO post and as such it has an internal reference make it not happen. 2. It is a wiki post and I intended it only to last until the question has been voted to close as duplicate. 3. I flagged this question to close, as it both is a duplicate and as well have requirements/demands beyond SO policy. 4. I don't mind have it deleted as soon as the bounty of this question has expired, so it can be treated as one without. — Asons, Jan 09 '16 at 08:34

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?

1 Answers1