I have a section on our website that loads quite slowly as it's doing some intensive calls.
Any idea how I can get a div to say something similar to "loading" to show while the page prepares itself and then vanish when everything is ready?
This question is related to
javascript
jquery
html
dom
loader
The answer is
window.onload = function(){ document.getElementById("loading").style.display = "none" }#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}_x000D_
_x000D_
#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100} <div id="loading">_x000D_
<img id="loading-image" src="img/loading.gif" alt="Loading..." />_x000D_
</div> Page loading image with simplest fadeout effect created in JS:
My blog will work 100 percent.
function showLoader()_x000D_
{_x000D_
$(".loader").fadeIn("slow");_x000D_
}_x000D_
function hideLoader()_x000D_
{_x000D_
$(".loader").fadeOut("slow");_x000D_
}.loader {_x000D_
position: fixed;_x000D_
left: 0px;_x000D_
top: 0px;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
z-index: 9999;_x000D_
background: url('pageLoader2.gif') 50% 50% no-repeat rgb(249,249,249);_x000D_
opacity: .8;_x000D_
}<div class="loader">I've needed this and after some research I came up with this (jQuery needed):
First, right after the <body> tag add this:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your CSS:
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
Then, add this javascript to your page (preferably at the end of your page, before your closing </body> tag, of course):
<script>
$(window).load(function() {
$('#loading').hide();
});
</script>
Finally, adjust the position of the loading image and the background-colour of the loading div with the style class.
This is it, should work just fine. But of course you have to have an ajax-loader.gif somewhere. Freebies here. (Right-click > Save Image As...)
for drupal in your theme custom_theme.theme file
function custom_theme_preprocess_html(&$variables) {
$variables['preloader'] = 1;
}
In html.html.twig file after skip main content link in body
{% if preloader %}
<div id="test-preloader" >
<div id="preloader-inner" class="cssload-container">
<div class="wait-text">{{ 'Please wait...'|t }} </div>
<div class="cssload-item cssload-moon"></div>
</div>
</div>
{% endif %}
in css file
#test-preloader {
position: fixed;
background: white;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
}
.cssload-container .wait-text {
text-align: center;
padding-bottom: 15px;
color: #000;
}
.cssload-container .cssload-item {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 131px;
height: 131px;
background-color: #fff;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-o-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-ms-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-webkit-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
-moz-box-shadow: 0 0 21px 3px rgba(130, 130, 130, 0.26);
}
.cssload-container .cssload-moon {
border-bottom: 26px solid #008AFA;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
animation: spin 1.45s ease infinite;
-o-animation: spin 1.45s ease infinite;
-ms-animation: spin 1.45s ease infinite;
-webkit-animation: spin 1.45s ease infinite;
-moz-animation: spin 1.45s ease infinite;
}
Here's the jQuery I ended up using, which monitors all ajax start/stop, so you don't need to add it to each ajax call:
$(document).ajaxStart(function(){
$("#loading").removeClass('hide');
}).ajaxStop(function(){
$("#loading").addClass('hide');
});
CSS for the loading container & content (mostly from mehyaa's answer), as well as a hide class:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-content {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
z-index: 100;
}
.hide{
display: none;
}
HTML:
<div id="loading" class="hide">
<div id="loading-content">
Loading...
</div>
</div>
Create a <div> element that contains your loading message, give the <div> an ID, and then when your content has finished loading, hide the <div>:
$("#myElement").css("display", "none");
...or in plain JavaScript:
document.getElementById("myElement").style.display = "none";
I have another below simple solution for this which perfectly worked for me.
First of all, create a CSS with name Lockon class which is transparent overlay along with loading GIF as shown below
.LockOn {
display: block;
visibility: visible;
position: absolute;
z-index: 999;
top: 0px;
left: 0px;
width: 105%;
height: 105%;
background-color:white;
vertical-align:bottom;
padding-top: 20%;
filter: alpha(opacity=75);
opacity: 0.75;
font-size:large;
color:blue;
font-style:italic;
font-weight:400;
background-image: url("../Common/loadingGIF.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Now we need to create our div with this class which cover entire page as an overlay whenever the page is getting loaded
<div id="coverScreen" class="LockOn">
</div>
Now we need to hide this cover screen whenever the page is ready and so that we can restrict the user from clicking/firing any event until the page is ready
$(window).on('load', function () {
$("#coverScreen").hide();
});
Above solution will be fine whenever the page is loading.
Now the question is after the page is loaded, whenever we click a button or an event which will take a long time, we need to show this in the client click event as shown below
$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});
That means when we click this print button (which will take a long time to give the report) it will show our cover screen with GIF which gives 
result and once the page is ready above windows on load function will fire and which hide the cover screen once the screen is fully loaded.
Well, this largely depends on how you're loading the elements needed in the 'intensive call', my initial thought is that you're doing those loads via ajax. If that's the case, then you could use the 'beforeSend' option and make an ajax call like this:
$.ajax({
type: 'GET',
url: "some.php",
data: "name=John&location=Boston",
beforeSend: function(xhr){ <---- use this option here
$('.select_element_you_want_to_load_into').html('Loading...');
},
success: function(msg){
$('.select_element_you_want_to_load_into').html(msg);
}
});
EDIT
I see, in that case, using one of the 'display:block'/'display:none' options above in conjunction with $(document).ready(...) from jQuery is probably the way to go. The $(document).ready() function waits for the entire document structure to be loaded before executing (but it doesn't wait for all media to load). You'd do something like this:
$(document).ready( function() {
$('table#with_slow_data').show();
$('div#loading image or text').hide();
});
Default the contents to display:none and then have an event handler that sets it to display:block or similar after it's fully loaded. Then have a div that's set to display:block with "Loading" in it, and set it to display:none in the same event handler as before.
Based on @mehyaa answer, but much shorter:
HTML (right after <body>):
<img id = "loading" src = "loading.gif" alt = "Loading indicator">
CSS:
#loading {
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
/* 1/2 of the height and width of the actual gif */
margin: -16px 0 0 -16px;
z-index: 100;
}
Javascript (jQuery, since I'm already using it):
$(window).load(function() {
$('#loading').remove();
});
This will be in synchronisation with an api call, When the api call is triggered, the loader is shown. When the api call is succesful, the loader is removed. This can be used for either page load or during an api call.
$.ajax({
type: 'GET',
url: url,
async: true,
dataType: 'json',
beforeSend: function (xhr) {
$( "<div class='loader' id='searching-loader'></div>").appendTo("#table-playlist-section");
$("html, body").animate( { scrollTop: $(document).height() }, 100);
},
success: function (jsonOptions) {
$('#searching-loader').remove();
.
.
}
});
CSS
.loader {
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #3498db;
width: 30px;
height: 30px;
margin: auto;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
margin-top: 35px;
margin-bottom: -35px;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
This script will add a div that covers the entire window as the page loads. It will show a CSS-only loading spinner automatically. It will wait until the window (not the document) finishes loading, then it will wait an optional extra few seconds.
- Works with jQuery 3 (it has a new window load event)
- No image needed but it's easy to add one
- Change the delay for more branding or instructions
- Only dependency is jQuery.
CSS loader code from https://projects.lukehaas.me/css-loaders
_x000D_
$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');_x000D_
$(window).on('load', function(){_x000D_
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds._x000D_
});_x000D_
function removeLoader(){_x000D_
$( "#loadingDiv" ).fadeOut(500, function() {_x000D_
// fadeOut complete. Remove the loading div_x000D_
$( "#loadingDiv" ).remove(); //makes page more lightweight _x000D_
}); _x000D_
} .loader,_x000D_
.loader:after {_x000D_
border-radius: 50%;_x000D_
width: 10em;_x000D_
height: 10em;_x000D_
}_x000D_
.loader { _x000D_
margin: 60px auto;_x000D_
font-size: 10px;_x000D_
position: relative;_x000D_
text-indent: -9999em;_x000D_
border-top: 1.1em solid rgba(255, 255, 255, 0.2);_x000D_
border-right: 1.1em solid rgba(255, 255, 255, 0.2);_x000D_
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);_x000D_
border-left: 1.1em solid #ffffff;_x000D_
-webkit-transform: translateZ(0);_x000D_
-ms-transform: translateZ(0);_x000D_
transform: translateZ(0);_x000D_
-webkit-animation: load8 1.1s infinite linear;_x000D_
animation: load8 1.1s infinite linear;_x000D_
}_x000D_
@-webkit-keyframes load8 {_x000D_
0% {_x000D_
-webkit-transform: rotate(0deg);_x000D_
transform: rotate(0deg);_x000D_
}_x000D_
100% {_x000D_
-webkit-transform: rotate(360deg);_x000D_
transform: rotate(360deg);_x000D_
}_x000D_
}_x000D_
@keyframes load8 {_x000D_
0% {_x000D_
-webkit-transform: rotate(0deg);_x000D_
transform: rotate(0deg);_x000D_
}_x000D_
100% {_x000D_
-webkit-transform: rotate(360deg);_x000D_
transform: rotate(360deg);_x000D_
}_x000D_
}_x000D_
#loadingDiv {_x000D_
position:absolute;;_x000D_
top:0;_x000D_
left:0;_x000D_
width:100%;_x000D_
height:100%;_x000D_
background-color:#000;_x000D_
}This script will add a div that covers the entire window as the page loads. It will show a CSS-only loading spinner automatically. It will wait until the window (not the document) finishes loading._x000D_
_x000D_
<ul>_x000D_
<li>Works with jQuery 3, which has a new window load event</li>_x000D_
<li>No image needed but it's easy to add one</li>_x000D_
<li>Change the delay for branding or instructions</li>_x000D_
<li>Only dependency is jQuery.</li>_x000D_
</ul>_x000D_
_x000D_
Place the script below at the bottom of the body._x000D_
_x000D_
CSS loader code from https://projects.lukehaas.me/css-loaders_x000D_
_x000D_
<!-- Place the script below at the bottom of the body -->_x000D_
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Source: Stackoverflow.com