I'm trying to make a simple page load progress bar with CSS and a bit of JS. I already made a working css, but the problem is the bar shows up after page change, when I would like it to firstly finish the css progress bar animation and then load next page.
HTML animation code:
<div class="progress-css"></div>
CSS animation code:
:root {
--progress-duration: 0.8s;
--progress-height: 2.5px;
--progress-color: rgb(35,163,255);
--progress-color-ending: rgba(35,163,255,0.2);
--progress-shadow: 0 0 3px 2px rgba(0,148,255,0.23);
}
.progress-css {
position: fixed;
height: var(--progress-height);
width: 100%;
background-color: transparent;
z-index: 99999;
box-shadow: none;
transition: 0.8s;
animation: progress-load var(--progress-duration);
-webkit-animation: progress-load var(--progress-duration);
animation-timing-function: ease-in-out;
}
#keyframes progress-load {
0% {
background-color: var(--progress-color);
box-shadow: var(--progress-shadow);
width: 0%;
}
20% {
background-color: var(--progress-color);
width: 20%;
}
25% {
background-color: var(--progress-color);
width: 28%;
}
90% {
background-color: var(--progress-color);
width: 85%;
}
100% {
width: 100%;
background-color: var(--progress-color-ending);
box-shadow: none;
}
}
Now, when I will click on a Redirect tag on a website, it will load the specified page, and then it will display progress animation. I would like it to firstly display progress animation, and then load the next page.
I would be grateful for an answer to my question.
JavaScript has an animationend event that can be used to detect when a keyframe animation is complete. Ideally you would wait to add this listener after any required data (if applicable) is completed loading so it doesn't just arbitrarily advance if loading is still in-progress.
document.querySelector('.progress-css').addEventListener('animationend', e=>{
//go to next page or similar
window.location.href = 'subpage.html';
});
Updated example based on more details from the comments:
const progressBar = document.querySelector('.progress-css');
//add a listener to all of the links; modify the query if it should be restricted to specific links
document.querySelectorAll('a').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault(); //stop the default behavior of navigating to a link when clicking an <a> tag
setupLoadingBar( link.href );
});
});
const setupLoadingBar = url => {
const cleanupLoadingBarAndNavigate = e => {
progressBar.removeEventListener('animationend', cleanupLoadingBarAndNavigate); //removing this each time is important to ensure that it doesn't run multiple times if you don't actually navigate away
progressBar.classList.remove('loading');
alert('Navigate to: '+url);
//uncomment this to actually navigate to the url
//window.location.href = url;
}
progressBar.classList.add('loading');
progressBar.addEventListener('animationend', cleanupLoadingBarAndNavigate);
}
:root {
--progress-duration: 4s;
--progress-height: 2.5px;
--progress-color: rgb(35,163,255);
--progress-color-ending: rgba(35,163,255,0.2);
--progress-shadow: 0 0 3px 2px rgba(0,148,255,0.23);
}
.progress-css {
position: fixed;
height: var(--progress-height);
width: 100%;
background-color: transparent;
z-index: 99999;
box-shadow: none;
transition: 0.8s;
display:none;
}
.loading {
display:block;
animation: progress-load var(--progress-duration);
-webkit-animation: progress-load var(--progress-duration);
animation-timing-function: ease-in-out;
}
#keyframes progress-load {
0% {
background-color: var(--progress-color);
box-shadow: var(--progress-shadow);
width: 0%;
}
20% {
background-color: var(--progress-color);
width: 20%;
}
25% {
background-color: var(--progress-color);
width: 28%;
}
90% {
background-color: var(--progress-color);
width: 85%;
}
100% {
width: 100%;
background-color: var(--progress-color-ending);
box-shadow: none;
}
}
About
Contact
<div class="progress-css"></div>
My question is similar to other questions, but with a twist.
I'm trying to inject a div as follows :
var headerDiv = document.getElementById("headerDiv");
if (headerDiv) {
var logo = document.createElement('div');
logo.id = "my-header";
//logo.style.display = "none";
var innerHTML = ' <div id="my-header-image"></div>' +
' <div id="my-header-text">' +
' My header text' +
' </div> ';
logo.innerHTML = innerHTML;
headerDiv.insertBefore(logo, headerDiv.firstChild);
}
headerDiv already previously exists in the page and renders well.
I'm calling my code only when the DOM is ready.
My problem is as follows : when the injection happens, "logo" blits on the page as an entirely white div for a split second. It's almost not noticeable if you don't look well. Then the style gets applied and everything goes back to normal.
It happens both in IE11 (IE10 mode or Edge mode) AND in Chrome.
It didn't happen when I was using jQuery instead of insertBefore.
Here is the CSS :
#my-header {
pointer-events: none; /* the clicks must go through -- to the native Sharepoint buttons underneath. Required for Edge compatibility. */
display:block;
position: absolute;
text-align: center;
width: 100%;
z-index: 1000;
height: 50px;
overflow: auto;
/* fade-in */
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#my-header-text {
display:inline-block;
padding: 0;
position: relative;
bottom: 15px;
margin-left: 18px;
color: white;
font-size: 1.0em;
}
#my-header-image {
display:inline-block;
content: "";
top: 3px;
left: 20px;
width : 184px; /* same size as logo image */
height : 38px;
margin-top: 6px;
background-image: url("https://MY_URL/logo.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
/* fade-in animation definition */
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Could it be caused by the fade-in animation? The system doesn't know how to handle a new element that's supposed to start invisible (because of the animation) ?
I've noticed that "logo" blinks above "headerDiv" instead of on top, despite its absolute positionning. One more clue of some property being ignored in the early stage of rendering, between the time when the div gets added and the time when its style gets applied.
I've solved it wth a dirty workaround :
In the JS :
...
var logo = document.createElement('div');
logo.id = "my-header";
logo.style.height = "0"; // <-- new
...
In the CSS :
#my-header {
...
height: 50px !important; /* <-- made it important */
...
}
As you can understand, the object is forcefully made invisible and forced not to take up any on-screen space (by having height = 0) between the time of its creation by the JS and the time when the style gets applied by the CSS.
Therefore, the blinking still conceptually happens but its effect is not visible.
I have a video and i have a loader for the buffer. i cannot seem to center it. Iv tried countless methods iv found online and nothing seems to center it.
I have tried every single method from here: http://vanseodesign.com/css/vertical-centering/
I have tried every method from here: https://www.w3.org/Style/Examples/007/center.en.html
I have tried every method on here: https://www.w3schools.com/css/css_align.asp
No joke im not kidding. i have tried everything.
Nothing is working....
Also on mobile that blue loader ends up at the bottom of the video and not centered meaning i cannot use margins because it needs to be centered for every single screen size. Though the spinner class requires this margin margin: 100px auto; or the loader wont show up.....
It needs to have Position: absolute; on the parent div.
It also needs to have display: none; on the parent div so it is hidden until the javascript calls it. Now No matter what i do i keep getting this:
Desktop Problem image <--
Mobile problem image <--
The "Hello how are you" is centered. The blue loader is not. The blue loader needs to be centered.
It must work in a grid similar to what i made here: https://jsfiddle.net/9faxe587/2/
var video = document.getElementById("video_1");
var placeholder = document.getElementById("placeholder_1");
placeholder_1.style.top = video_1.offsetTop + "px";
placeholder_1.style.left = video_1.offsetLeft + "px";
video_1.onwaiting = function() {
showPlaceholder(placeholder_1, this);
};
video_1.onplaying = function() {
hidePlaceholder(placeholder_1, this);
};
function showPlaceholder(img, vid) {
img.style.height = vid.scrollHeight + "px";
img.style.width = vid.scrollWidth + "px";
img.style.display = "block";
}
function hidePlaceholder(img, vid) {
img.style.display = "none";
}
.spinner {
margin: 100px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
}
.spinner>div {
background-color: #0080ff;
height: 100%;
width: 5.5px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
#-webkit-keyframes sk-stretchdelay {
0%,
40%,
100% {
-webkit-transform: scaleY(0.4)
}
20% {
-webkit-transform: scaleY(1.0)
}
}
#keyframes sk-stretchdelay {
0%,
40%,
100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}
20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
.THG-placeholder {
display: none;
position: absolute;
z-index: 1;
}
.THG-video {
width: 100% !important;
height: auto !important;
max-height: 380px;
max-width: 512px;
z-index: 1;
}
<video class="THG-video" id="video_1" controls preload="none">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
<div id="placeholder_1" class="THG-placeholder">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
I have updated #DanteTheSmith's fiddle with my solution using Flexbox.
Fiddle: https://jsfiddle.net/Ldhoo0f6/5/
.THG-placeholder {
top: 0;
left: 0;
width: 100%;
display: none; // show with display: flex;
align-items: center;
justify-content: center;
height: Calc(100% - 36px);
position: absolute;
z-index: 1;
}
video {
width: 100%;
}
.wrapper {
position: relative;
max-width: 460px; // or a percentage or whatever you like
}
Explanation
There is a wrapper div with position: relative around the whole thing, so the absolutely positioned element will be within that div's constraints.
The video is 100% width so it is responsive.
The wrapper div determines the size of the video with max-width
The placeholder element has display: flex added by js.
It is centred with Flexbox align-items and justify-content.
The height uses Calc to adjust for the height of the video controls - though this might differ depending on the browser (I used Chrome). You could just use 100% if you're not too pedantic.
Flexbox is pretty well supported these days: https://caniuse.com/#feat=flexbox
.spinner {
margin: 55px auto; // (video height / 2) - (spinner height / 2)
height: 40px;
text-align: center;
font-size: 10px;
}
If you wanna center the element in entire video box (including the controls)
.spinner {
margin: 32px auto; // (video height - controls height - 45px / 2) - (spinner height / 2)
height: 40px;
text-align: center;
font-size: 10px;
}
Working with second CSS:
fidd
So a while back I think i saw an effect on some site that was transitioning between different background colors (changing background colors).
The color changed like every 2-3 seconds.
The transitions were pretty smooth as well. I found it pretty cool.
I'm redesigning my services website and would like to add that effect to my site.
There are 2 variables that need to be controlled: time and color.
P.S. Not trying to get anyone to write the code for me, but could you please refer me to some links where I can find out about this effect.
Would be great if you could tell me the name of this effect and the library it exists in.
Here's JS Fiddle that shows you some #keyframes in combo with the js to slow down timing via click. Hope that helps!
.body {
width: 100%;
height: 1000px;
animation-name: colorChange;
animation-duration: 10s;
animation-iteration-count: infinite;
text-align: center;
}
#keyframes colorChange {
0% {
background: red;
}
20% {
background: blue;
}
40% {
background: green;
}
60% {
background: orange;
}
80% {
background: purple;
}
100% {
background: red;
}
}
.button {
padding: 10px;
margin-top: 40px;
font-size: 20px;
}
$( ".button" ).on( "click", function () {
$( ".body" ).css( "animation-duration", "20s" )
})
Edit
Added snippet.
$( ".button" ).on( "click", function () {
$( ".body" ).css( "animation-duration", "20s" )
})
.body {
width: 100%;
height: 1000px;
animation-name: colorChange;
animation-duration: 10s;
animation-iteration-count: infinite;
text-align: center;
}
#keyframes colorChange {
0% {
background: red;
}
20% {
background: blue;
}
40% {
background: green;
}
60% {
background: orange;
}
80% {
background: purple;
}
100% {
background: red;
}
}
.button {
padding: 10px;
margin-top: 40px;
font-size: 20px;
}
<div class="body">
<button class="button">Change Timing</button>
</div>
To change your website background color in a defined time interval you can follow the bellow link.
http://www.cakephpexample.com/html/add-gradient-effect-to-your-website-by-javascript/
Where a complete example given with source code.
You can possibly do it with CSS3 animation keyframes.
Take a look at this Fun With Pulsing Background Colors in CSS3.
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?
Original Answer
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="path/to/ajax-loader.gif" alt="Loading..." />
</div>
Then add the style class for the div and image to your CSS:
#loading {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
opacity: 0.7;
background-color: #fff;
z-index: 99;
}
#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-color of the loading div with the style class.
This is it, should work just fine. But of course you should have an ajax-loader.gif somewhere or use base64 url for image's src value. Freebies here. (Right-click > Save Image As...)
Update
For jQuery 3.0 and above you can use:
<script>
$(window).on('load', function () {
$('#loading').hide();
})
</script>
Update
The original answer is from jQuery and before flexbox era. You can use many view management libraries / frameworks now like Angular, React and Vue.js. And for CSS you have flexbox option. Below is CSS alternative:
#loading {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.7;
background-color: #fff;
z-index: 99;
}
#loading-image {
z-index: 100;
}
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
$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
$( "#loadingDiv" ).fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$( "#loadingDiv" ).remove(); //makes page more lightweight
});
}
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
#-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#loadingDiv {
position:absolute;;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
}
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.
<ul>
<li>Works with jQuery 3, which has a new window load event</li>
<li>No image needed but it's easy to add one</li>
<li>Change the delay for branding or instructions</li>
<li>Only dependency is jQuery.</li>
</ul>
Place the script below at the bottom of the body.
CSS loader code from https://projects.lukehaas.me/css-loaders
<!-- Place the script below at the bottom of the body -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
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}
#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100}
<div id="loading">
<img id="loading-image" src="img/loading.gif" alt="Loading..." />
</div>
Page loading image with simplest fadeout effect created in JS:
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.
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.
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>
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();
});
My blog will work 100 percent.
function showLoader()
{
$(".loader").fadeIn("slow");
}
function hideLoader()
{
$(".loader").fadeOut("slow");
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('pageLoader2.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}
<div class="loader"></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";
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); }
}
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;
}
I needed a splash screen, which I implemented by reusing parts of the solutions listed here. It uses Vanilla JS for full backwards-compatibility.
Step 1: Add a background with a spinner gif on top of the page, then remove them when everything is loaded.
body.has-js::before {
content: '';
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
height: 100vh;
width: 100vw;
pointer-events: none;
transition: all .2s;
background: white url('/img/spinner.gif') no-repeat center center / 50px;
}
body.loaded::before {
opacity: 0;
width: 0;
height: 0;
}
Step 2: Add a little script right after the opening body tag to start displaying the load/splash screen.
<body>
<script>
// Only show loader if JS is available
document.body.className += ' has-js';
// Option 1: Hide loader when 'load' event fires
window.onload = function() { document.body.className += ' loaded'; }
// Option 2: Hide loader after 2 seconds, in case the 'load' event never fires
setTimeout(function(){ document.body.className += ' loaded'; }, 1000 * 2);
</script>
<!-- Page content goes after this -->
</body>
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();
});