Ajax enable browser loading bar

Question

Okay, so similar questions have been asked before, but I'm going to try and be as clear as possible.

I have a webapp I'm working on that loads internal pages via AJAX. When I'm on my computer I would like to use the browsers normal loading/progress bar (the one in the address bar, not the progress html element) to show users the progress of the pages being loaded via ajax into my webapp. How do I trigger this functionality? Is it even possible? I know how to do a custom progress bar, which I plan on using for the webapp when it's not in a browser that has a default address & loading bar.

score 1 · Answer 1 · edited May 23 '17 at 12:22

1

I had a similar question a little while ago and came to the conclusion that there isn't a way to tell the browser the actual progress of the data being loaded, but there is a way to trigger the loading indicator for when you are loading things such as icons or data in the background using Ajax.

Some links that might help, and helped me as well, would be this post and this page.

I hope this helps and answers your question!

Liam

edited May 23 '17 at 12:22

Community

1
1

answered Jan 19 '15 at 01:49

Liam Bolling

134
1
8

I saw that post, but that uses iframes... I want to use ajax not iframes. – CJT3 Jan 19 '15 at 11:50
Also, it doesn't seem to do anything in Safari – CJT3 Jan 19 '15 at 11:52

score 0 · Answer 2 · answered Jan 19 '15 at 01:10

Yes, it is possible. You can do something like this. Here is your Javascript:

var xmlhttp;                                                                                    
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
    xmlhttp.onreadystatechange=function(){
    document.getElementById("progress").value = xmlhttp.readyState;
}

Here is the HTML:

 <html>
  <body>
    <progress id="progress" value="0" max="4"></progress>
  </body>
  </html>

I hope this answers your question.

...how is that using the browser's loading bar? I didn't say I wanted to use a progress element. I want to trigger the DEFAULT LOADING BAR OF THE BROWSER (the one in the address bar). NOT an element on the page. — CJT3, Jan 19 '15 at 01:39

Ajax enable browser loading bar

2 Answers2