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");
});
