CODEWITHSUNDEEP
javascriptjqueryyoutubeprogress-bar
Mou
Mou

Reputation: 16282

Want to show youtube like progress bar when page load

I have seen web sites where when the page loads for the first time a youtube like progress bar is shown. When the progress bar completes, the page content is shown with a fade in effect. The web site address is https://www.skysite.com/

I have checked many links for a youtube like progress bar, but those pages are showing a progress bar like you, but they have no relation with the page content.

Here are some of the links to which I have consulted.

http://stackoverflow.com/questions/18350370/youtube-like-progress-bar
http://onextrapixel.com/examples/youtube-like-ajax-loading-bar/index5.html
http://jsfiddle.net/ajaSB/3/
http://thuru.net/2014/10/05/youtube-like-progress-bar-using-nprogress-js-with-angular-js/
http://ricostacruz.com/nprogress/

Just guide me on how to show a youtube like progress bar, and when progress completes I would like to show page content.

Upvotes: 1

Views: 3760

Answers (3)

Cyrbil
Cyrbil

Reputation: 6478

The website you are refering to is using pace - https://github.com/HubSpot/pace/

It listen to all ajax request and dom loading and display a progress bar while hidding the page. Once everything have been loaded, it displays the content.

You can preview an example of this library in action here (yeah, inception power)

Update from comments:

Do you have 2 accounts ?
As I already said, this library DOES IT ALL. It tracks EVERY bytes being loaded after the script itself. It is easily customizable, and have a clear doc that you should read. It allows you to watch for dom elements loading progression, images/scripts/ajax stuffs progression, or even your long scripts.

If you have only your main html page that is the heavy stuff you should consider changing your design and refactoring in small pieces.
And if you can't and still want to tracks the progress, you can put a simple script at the very top of your page that will:

  • Send a HEAD http request for the same page with ajax. Just to know your total page size (Content-Length header).
  • Display progress based on current page size (many way of tracking, most simple is something like document.firstElementChild.innerHTML.length (it won't be very precise))
  • Once the page have been loaded, removes the progress bar

I gave you everything you need to make it work.

Edit2:

As I feel you will ask for more ... Here is a NodeJs example. It simply create an http server, and serve a page with chunked content (and simulate lags ...). So the full page takes time to load. The javascript display a text progression in real time.

var http = require('http');

function chunked(res, count) {
    res.write('<p>Chunked content n°' + count + '</p>');
    setTimeout(function() {
        if(count > 0)
            chunked(res, count - 1);
        else
            res.end('</body></html>');
    }, 1000);
}

function handleRequest(request, response){
    response.setHeader('Connection', 'Transfer-Encoding');
    response.setHeader('Content-Type', 'text/html; charset=utf-8');
    response.setHeader('Transfer-Encoding', 'chunked');


    response.write('<html><head><script>\n' +
        'var progress = 0; startLength = 825; TotalLength = 1090;\n' +
        'function track_progress() {\n' +
        '    console.log(document.firstElementChild.innerHTML.length);' +
        '    if(progress > 1000) {' +
        '        document.body.firstElementChild.innerHTML = "Progress: 100% - Done !";\n' +
        '        return;\n' +
        '    }\n' +
        '    \n' +
        '    if(document.body) {\n' +
        '        progress = (document.firstElementChild.innerHTML.length - startLength)* 1000 / (TotalLength - startLength);\n'+
        '        document.body.firstElementChild.innerHTML = "Progress: " + (Math.round(progress)/10) + "%";\n' +
        '    }\n' +
        '    setTimeout(track_progress, 500);\n' +
        '}\n' +
        'track_progress();\n' +
    '</script></head><body><p id="progress">Progress: 0%</p>');

    response.write('<p>Starting to send chunked content...</p>');
    chunked(response, 10);
}

var server = http.createServer(handleRequest);
server.listen(8080, function(){
    console.log("Server listening on: http://localhost:8080");
});

Upvotes: 1

Akshay
Akshay

Reputation: 540

When your page is loading, show a progress bar. Once content is loaded hide the progress bar. You can use library like JQwidgets to create progress bar.

Upvotes: 0

Brendan W
Brendan W

Reputation: 3453

One option:

  1. Redirect to a blank page with an empty progress bar.

  2. Use javascript to fill the progress bar from 0% to 100%.

  3. THEN use javascript to redirect to your content page.

Another option:

  1. Hide all the content on your page (maybe use javascript to add 'hidden' to the divs -- there are a lot of ways to do that)

  2. ...except for the progress bar. Fill it from 0% to 100%.

  3. Use javascript to hide the progress bar and show all of your content.

Upvotes: 0

Related Questions