Changing a jQuery loading bar so it doesn't redirect (Similar to Youtube new loading bar)

Question

I have this loading bar that is a Jquery Plugin that is available here: http://www.jqueryscript.net/loading/Smooth-Progress-Bar-Loading-Effect-With-jQuery.html

However, the bar works on a redirect instead of displaying what actually loads. When the below code from $(this).children().html ... is in place, I see the progress bar in my Inspect Element tab go from 0% - 100%. Which is great as it loads, But I want the page to stay current and to load what ever other page is clicked, once the bar is at 100% instead.

Kind of similar to the new youtube red pre-loader. Pretty sure this script is capable of this but after hours of tweaking and attempting changes, I can't seem to work out how.

I'm a PHP head and new jQuery :/

<script type='text/javascript'>
    function loading(percent){
        $('.progress span').animate({width:percent},1000,function(){
            $(this).children().html(percent);
            if(percent=='100%'){
                $(this).children().html('Loading Complete, Redirect to Home Page...&nbsp;&nbsp;&nbsp;&nbsp;');
                setTimeout(function(){
                    $('.container').fadeOut();
                    location.href="http://www.jqueryscript.net";
                },1000);
            }
        })
    }
  </script> 

Answer 1

This seems like a silly way of doing an Ajax redirect. You don't want to load the new page completely, that's why Ajax should be really beneficial, because you only need to refresh the inner content.

A better way of loading a page via Ajax would include:

• Make calls to the same URL when using Ajax and normal loads. Use your server side to pick up on the HTTP Header X-REQUESTED-WITH: XMLHTTPRequest, and if it's present, just send across the content. That way users without JavaScript can click on the same links and visit the standalone versions
• For newer browsers, you want to update the browser's URL without actually changing the page. This is best achieved using window.history.pushState (see here, but bear in mind that support for is very limited, particularly if your target audience are using IE.
  • I've never actually used it myself, but I know Ajaxify is quite a popular plugin which will help you get around this issue. As I'm aware it'll use the pushState if available, else it'll use "hashbangs" to update the URL. These were very popular with large sites such as Twitter and Facebook, but if you're using a modern browser you may notice they don't use them any more. They tended to divide opinion, mostly because they don't keep a proper track of a user's history, but as far as I'm aware they're the only option for older browsers. I suggest you read up more on them.
• Maybe there are better options out there, but this tutorial shows you one way of getting the progress for each request.
• Finally, when constructing your load bar, I'd not bother with using jQuery to make a nice slide effect, but use CSS to transition based on width. Your jQuery then only has to change the width of the load-bar element, and the CSS will take care of the rest. See tutorial