So I have an image viewer which has a zoom functionality, which works via the transform: scale() property.
Animating the zoom is no problem with transition: transform .3s.
To make the zoom on the mousewheel go to where the mousewheel is pointed, I calculated the correct position to set the new origin, but when I set it, it just jumps there with no animation.
What I have tried:
Setting transition for the transform-origin property → Doesn't work
Doing it manually in JS with setTimeout and slowly setting the transform-origin at the right position → plays the zoom animation and then jumps
Is there any way to animate both transform: scale() and transform-origin in one go?
Dupe
As the last question has been closed as a duplicate of How to have multiple CSS transitions on an element?, here is a snippet, to show you that this is not my question.
const img = document.querySelector('#container img');
let on = true;
const toggleEffect = () => {
if(on) {
img.style.transform = 'scale(2.5)';
img.style.transformOrigin = '80% 80%';
} else {
img.style.transform = 'scale(1.4)';
img.style.transformOrigin = '20% 20%';
}
on = !on;
};
#container {
width: 500px;
height: 300px;
overflow: hidden;
background-color: red;
}
#container img {
height: 100%;
width: 100%;
object-fit: contain;
transform: scale(1.4);
transform-origin: 20% 20%;
transition: transform .3s, transform-origin .3s;
}
<div id="container">
<img src="https://images.unsplash.com/photo-1482066490729-6f26115b60dc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2004&q=80"/>
</div>
<button onclick="toggleEffect()">Toggle</button>
EDIT: Technically this is a duplicated. (Chrome Bug in some versions)
- Using both transition:
body, div {
width: 100%;
height: 100vh;
overflow: hidden;
}
div {
background-color: gray;
width: auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
transform: scale(1.1);
transform-origin: 50% -30px -100px;
transition: transform-origin .2s ease-in-out, transform 4s ease-in-out;
}
div:hover {
transform: scale(1.7);
transform-origin: 100px 100px;
}
<div>Test</div>
- Using animation with#keyframes:
body,div {
width: 100%;
height: 100vh;
}
div {
width: auto;
display: flex;
justify-content: center;
align-items: center;
transform-origin: 0 0 0;
animation: scale-origin 3s infinite;
font-size: 30px;
}
#keyframes scale-origin {
0% {
transform: scale(.5);
transform-origin: 100px 100px 1000px;
}
100% {
transform: scale(1.1);
transform-origin: left 500px -30px
}
}
<div>Test</div>
For me the only way to get around this bug was to ensure a redraw of the element on each "animation" (in this case transition) frame as you can clearly see via getComputedStyle that the transform-origin is correctly transitioned!
Basically I added eventlisteners for the transitionstart and transitionend and on each animationframe toggle some style attribute that enforces a redraw (f.e. in my case margin-left from 0 to 1 to 0px until the animation is finished)
function forceRedraw(ts) {
this.style.marginLeft = this.style.marginLeft == '1px' ? '0px':'1px';
if (this.classList.contains('transitioning'))
requestAnimationFrame(forceRedraw.bind(this));
}
In my example I transition rotation and the transform-origin (from top left to bottom left) at the same time.
https://codepen.io/ftav/pen/QWvYEPj
Depending on which element you modify this might have more or less of a performance impact. It works fine for me. I just wish they would fix the bug and this workaround could go away.
I have a fiddle in which there are 4 tiles placed horizontally with some space in between.
Here is the CSS which I have used in order to place them horizontally.
.featured-block {
position: relative;
display: flex;
justify-content: space-between;
}
Problem Statement:
What I want to achieve for the 3rd/4th tile(image) in the fiddle is I want cross-fade (fade-in/fade-out) happen with them(3rd/4th image) at the 3rd position from the left.
I believe I need to add the following css codes with some modification in order to make that happen but I am not sure what
modification I need to make.
.featured-block__item {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transition: opacity 800ms ease; /* immediately start fading out when active class is lost */
}
.featured-block__item.featured-block__item-active {
opacity: 1;
}
you can use following css code
.featured-block {
position: relative;
display: flex;
width:100%;
overflow:hidden;
justify-content: space-between;
}
.featured-block__item:nth-last-child(2),
.featured-block__item:last-child{
opacity: 0;
transition: opacity 800ms ease; /* immediately start fading out when active class is lost */
}
img{
width:calc(100% / 3);
}
.featured-block__item:last-child{
position: absolute;
top: 0px;
right: 0px;
bottom:0px;
}
.featured-block__item:nth-last-child(2).featured-block__item-active,
.featured-block__item:last-child.featured-block__item-active {
opacity: 1;
}
i have an html page where,when hovered over the first image a second image fades in/is shown.The first image has an onclick() event which performs a transition of rotating the image and scaling it by some number.During the transition, the first image disappears and some text appears on the same place(area of the div tag of the first image).I perform the transition through javascript and the hovering animation using css. Now when i click on the text(or the area of the div tag) the transition must reverse back i.e., the div area must be as it was before clicking(even with the hovering working.). I would like to know the answer through pure javascript please.
Thank you in advance.
timesclicked = 0;
document.getElementById("hoverImage").addEventListener("click", function()
{
var x = document.getElementById('container');
timesclicked+=1;
if(timesclicked%2!=0)
{
//obj.style.opacity = '0.5';
x.style.transform = 'rotateZ(-360deg) scale(1.4)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<div style="font-size:16px; font-family: monospace; font-weight:bold; text-align:center; "> My Hero Academia, abbreviated as HeroAca is a Japanese superhero manga series written and illustrated by Kōhei Horikoshi. It has been serialized in Weekly Shōnen Jump since July 2014, and, as of February 2019, 22 volumes have been collected in tankōbon format.</div>'},'1300');
}
else
{
x.style.transform = 'rotateZ(-45deg) scale(1)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<img src="https://picsum.photos/300">'},'500');
}
});
img
{
width: 300px;
height: 300px;
}
#mainImage,#hoverImage
{
left: 0px;
position: absolute;
top: 0px;
}
#hoverImage
{
opacity: 0;
transition: opacity 0.4s 0.1s ;
}
#hoverImage:hover
{
opacity: 1;
}
#container
{
background: url(https://picsum.photos/300);
background-size: cover;
width: 300px;
height: 300px;
position: absolute;
top:20%;
left:40%;
transform: rotateZ(-45deg);
}
#container:before
{
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
}
<div id="container" >
<img id="mainImage" src="https://picsum.photos/300">
<img id="hoverImage" src="https://picsum.photos/300">
</div>
As much as i know, I think the second clicking event is not happening because the eventlistener is on the hoverImage. I need a way to run the else part of the code somehow.
It looks like there are a few problems with your code, and you're going to have some debugging to do. That said, try this for a strategy:
Put your on-click event on the #container.
Put all the styling and transitioning details in the css. Your javascript will just add and remove a class from the #container.
Don't track the number of clicks unless you need it for something else. Have your if statement check for the presence or absence of the class you're toggling. (Or use an explicit toggle instead of an if-else block.)
Don't add and remove the text and background in the javascript, put them both in the HTML and control their visibility using the CSS.
edit:
People asked for examples and clarification. I'm stealing some of this from other people's answers.
I'm not completely sure I've understood OP's intentions correctly, and there are some rough-around-the-edgues details (like the cursor when you hover before clicking), but I think this should serve as an example:
let container = document.getElementById("container");
container.addEventListener("click", function(){
container.classList.toggle("selected");
});
#mainImage, #hoverImage, #selectedText {
width: 300px;
height: 300px;
left: 0px;
position: absolute;
top: 0px;
}
#hoverImage {
opacity: 0;
transition: opacity 0.4s 0.1s;
}
#container:hover > #hoverImage {
opacity: 1;
}
#container {
width: 300px;
height: 300px;
position: absolute;
top:20%;
left:40%;
transform: rotateZ(-45deg);
transition: all 1.5s ease-in-out;
}
#container.selected {
transform: rotateZ(-360deg) scale(1.4);
}
#container:before {
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
}
#selectedText {
font-size:16px;
font-family: monospace;
font-weight:bold;
text-align:center;
background: url(https://picsum.photos/300?text);
background-size: cover;
opacity: 0;
transition: opacity 0.1s 0.5s;
}
#container.selected > #selectedText {
opacity: 1;
transition: opacity 0.1s 1.3s;
}
<div id="container">
<img id="mainImage" src="https://picsum.photos/300?main">
<img id="hoverImage" src="https://picsum.photos/300?hover">
<div id="selectedText">
My Hero Academia, abbreviated as HeroAca is a Japanese superhero
manga series written and illustrated by Kōhei Horikoshi. It has been
serialized in Weekly Shōnen Jump since July 2014, and, as of
February 2019, 22 volumes have been collected in tankōbon format.
</div>
</div>
you can add the click event listener on the container div.
timesclicked = 0;
document.getElementById("container").addEventListener("click", function()
{
var x = document.getElementById('container');
timesclicked+=1;
if(timesclicked%2!=0)
{
//obj.style.opacity = '0.5';
x.style.transform = 'rotateZ(-360deg) scale(1.4)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<div style="font-size:16px; font-family: monospace; font-weight:bold; text-align:center; "> My Hero Academia, abbreviated as HeroAca is a Japanese superhero manga series written and illustrated by Kōhei Horikoshi. It has been serialized in Weekly Shōnen Jump since July 2014, and, as of February 2019, 22 volumes have been collected in tankōbon format.</div>'},'1300');
}
else
{
x.style.transform = 'rotateZ(-45deg) scale(1)';
x.style.transition = 'all 1.5s ease-in-out';
setTimeout(() => {
x.innerHTML = '<img src="https://picsum.photos/300">'},'500');
}
});
img
{
width: 300px;
height: 300px;
}
#mainImage,#hoverImage
{
left: 0px;
position: absolute;
top: 0px;
}
#hoverImage
{
opacity: 0;
transition: opacity 0.4s 0.1s ;
}
#hoverImage:hover
{
opacity: 1;
}
#container
{
background: url(https://picsum.photos/300);
background-size: cover;
width: 300px;
height: 300px;
position: absolute;
top:20%;
left:40%;
transform: rotateZ(-45deg);
}
#container:before
{
content: "";
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(255, 255, 255, 0.6);
}
<div id="container" >
<img id="mainImage" src="https://picsum.photos/300">
<img id="hoverImage" src="https://picsum.photos/300">
</div>
</style>
if I understand your problem correctly, I think you just need to move the transition styles into your CSS
x.style.transition = 'all 1.5s ease-in-out';
I am trying to add pop-up messages, that confirms various actions, by showing up moving a bit to top, and then disappear. I used CSS3 animations to achieve that:
#message-boxOK {
width: 200px;
background-color: #80b95c;
position: relative;
float: middle;
padding: 10px 10px;
text-align: center;
border-radius: 5px;
margin: 0 auto;
-webkit-animation-name: rise; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation-name: rise;
animation-duration: 2s;
}
/* Standard syntax */
#keyframes rise {
0% {bottom:25px;}
100% {bottom:100px;}
}
And I used JavaScirpt to start these messages:
function messageBox(message,type) {
if(type=="ok"){
document.getElementById("dump-message").innerHTML ="<div id='message- boxOK'>"+message+"</div>";
setTimeout("document.getElementById('message-boxOK').remove()",1900);
}
else {
document.getElementById("dump-message").innerHTML ="<div id='message-box'>"+message+"</div>";
setTimeout("document.getElementById('message-box').remove()",1900);
}
}`
But when JS adds a new div with message, a new line appears in document and other content moves. When it is removed again line disappears and other content moves.
So how could I make appear this animation on top off other content without it moving. I need that message somewhere in the middle of document. Or maybe there some kind off other way or plug-in to display temporary pop-ups.
position: absolute will help here.
Absolute positioning takes the element completely out of the flow of the document therefore not affecting other content when your message appears and disappears. In contrast, floated elements nonetheless are still part of the document flow, which results in the shifting of content that you see on appearance/disappearance.
See the example below:
function messageBox(message, type) {
if (type == "ok") {
document.getElementById("dump-message").innerHTML = "<div id='message-boxOK'>" + message + "</div>";
setTimeout("document.getElementById('message-boxOK').remove()", 1900);
} else {
document.getElementById("dump-message").innerHTML = "<div id='message-box'>" + message + "</div>";
setTimeout("document.getElementById('message-box').remove()", 1900);
}
}
messageBox('Passing by!', 'ok');
*, :before, :after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bg-top {
background: red;
width: 100%;
height: 50px;
}
.bg-bottom {
background: blue;
width: 100%;
height: 50px;
}
#dump-message {
margin-top: 100px;
}
#message-boxOK {
width: 200px;
background-color: #80b95c;
position: absolute;
left: 50%;
margin-left: -100px;
padding: 10px;
text-align: center;
border-radius: 5px;
-webkit-animation-name: rise;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 2s;
/* Chrome, Safari, Opera */
animation-name: rise;
animation-duration: 2s;
}
/* Standard syntax */
#keyframes rise {
0% {
bottom: 25px;
}
100% {
bottom: 100px;
}
}
<div class='bg-top'></div>
<div id='dump-message'></div>
<div class='bg-bottom'></div>
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();
});