Display a loading bar before the entire page is loaded

Question

I would like to display a loading bar before the entire page is loaded. For now, I'm just using a small delay:

$(document).ready(function(){
    $('#page').fadeIn(2000);
});

The page already uses jQuery.

Note: I have tried this, but it didn't work for me: loading bar while the script runs

I also tried other solutions. In most cases, the page loads as usual, or the page won't load/display at all.

Answer 1

I would like to display a loading bar before the entire page is loaded. For now, I'm just using a small delay:

$(document).ready(function(){
    $('#page').fadeIn(2000);
});

The page already uses jQuery.

Note: I have tried this, but it didn't work for me: loading bar while the script runs

I also tried other solutions. In most cases, the page loads as usual, or the page won't load/display at all.

Answer 2

I would like to display a loading bar before the entire page is loaded. For now, I'm just using a small delay:

$(document).ready(function(){
    $('#page').fadeIn(2000);
});

The page already uses jQuery.

Note: I have tried this, but it didn't work for me: loading bar while the script runs

I also tried other solutions. In most cases, the page loads as usual, or the page won't load/display at all.

Answer 3

I would like to display a loading bar before the entire page is loaded. For now, I'm just using a small delay:

$(document).ready(function(){
    $('#page').fadeIn(2000);
});

The page already uses jQuery.

Note: I have tried this, but it didn't work for me: loading bar while the script runs

I also tried other solutions. In most cases, the page loads as usual, or the page won't load/display at all.

Answer 4

I would like to display a loading bar before the entire page is loaded. For now, I'm just using a small delay:

$(document).ready(function(){
    $('#page').fadeIn(2000);
});

The page already uses jQuery.

Note: I have tried this, but it didn't work for me: loading bar while the script runs

I also tried other solutions. In most cases, the page loads as usual, or the page won't load/display at all.

Answer 5

Semantic UI might also help, with just simple one liner to show and to hide the loading icon.

Eg: <div class="ui active centered inline loader"></div>

Source: https://semantic-ui.com/elements/loader.html

Found a code sample: https://codepen.io/fujiyamayuta/pen/JBxxJO

Although, there is a small typo in the JS file of the above code sample, corrected is shown below:

// ** Loader ON
$('#dimmer').dimmer('show');

// ** Loader OFF
// $('#dimmer').dimmer('hide');