Question

I would like to show a progress bar/loading popup in a web page until the page is fully loaded.

My web page is heavy because it contains an HTML editor in it, which is a jQuery based HTML editor that takes a lot of time to completely load. While it is loading, I wish to show a progress bar on my page which will get removed just after my whole page has finished loading.

Answer 1

Don’t know how to show a progress bar.
But showing a loading popup is easy using jQuery BlockUI Plugin
Just reference the jQuery and the BlockUi Plugin inside the head tag.

Do something like this then.

$(document).ready(function() { 
    // block page
    $.blockUI();
    //load your editor here
    //after load complete unblock page
    $.unblockUI();
}); 

Better still if you are using something like CKEditor, you can unblock the page after the load complete callback of the ckeditor.

Here is a small example with a page being blocked for 10 seconds. You can set the same at your callback. ( Example Here )