[Solved] 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

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

  }
});

Accepted Answer