Ok so, first of all, Here's my code.
var loader = document.getElementById("loader");
window.addEventListener("loader", function () {
loader.style.display = "none";
})
body {
height: 100%;
widows: 100%;
overflow: hidden;
}
.loader {
position: absolute;
height: 80px;
width: 80px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 6px solid lightgrey;
border-radius: 100%;
border-top: 6px solid skyblue;
animation: spin 1s infinite linear;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="loader" id="loader"></div>
<h1>Hello World</h1>
Now the problem is that the content gets loaded but the spinner doesn't disappear. Any Solutions.
BTW. This is my first post here so if you find that the code is not formatted correctly or some other mistake then forgive me.
loader is not an event.
window.addEventListener ("loader", function() )
Change that to:
window.addEventListener ("load", function() {
loader.style.display = 'none';
});
window.addEventListener ("load", fn()) waits until everything is loaded, including stylesheets and images.
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
You can use onload to hide the spinner when the page content had been loaded
To hide the spinner when the web page has completely loaded :
window.addEventListener ("load", function() {
loader.style.display = 'none';
});
With Timeout :
//Hide the spinner after 2 seconds
setTimeout(function(){loader.style.display = 'none';}, 2000);
With Jquery :
$(window).load(function(){
// PAGE IS FULLY LOADED
loader.style.display = 'none';
});
Demo Example :
var loader = document.getElementById('loader');
window.addEventListener ("load", function() {
//Hide the spinner after 2 seconds
setTimeout(function(){loader.style.display = 'none';}, 2000);
});
body {
height: 100%;
widows: 100%;
overflow: hidden;
}
.loader {
position: absolute;
height: 80px;
width: 80px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 6px solid lightgrey;
border-radius: 100%;
border-top: 6px solid skyblue;
animation: spin 1s infinite linear;
}
#keyframes spin {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Loader Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="loader" id="loader"></div>
<h1>Hello World</h1>
</body>
</html>
Does this work?(you have to download JQuery to use this)
window.onload(function() {
$(“#loader”).css(“display”, “none”);
});
Loader is not event so that doesn't work same way you are thinking
Create an element right below or end of loading process, and use jquery onload event on that Element, >> as process will done that Element will appear and it will trigger function.
Related
#loading_screen {
display: none;
z-index: 1;
height: 100vh;
width: 100vw;
opacity: 0;
background-color: red;
transition: opacity 4s 0s ease;
}
<div id="loading_screen" class="page">
</div>
<script>
function hide_page() {
const loading = document.getElementById('loading_screen');
loading.style.display = 'block';
loading.style.opacity = '1';
}
hide_page()
</script>
The loading_screen div appears instantly, as if the transition didn't even exist
Is there a chance that the css is not functional immediately when I run the page?
You need to wait for the browser to update and paint the loading element first, then you can use setTimeout to change the opacity after the browser has done its paint.
function hide_page() {
const loading = document.getElementById('loading_screen');
loading.style.display = 'block';
setTimeout(() => {
loading.style.opacity = '1';
});
}
hide_page();
#loading_screen {
display: none;
z-index: 1;
height: 100vh;
width: 100vw;
opacity: 0;
background-color: red;
transition: opacity 4s ease;
}
<div id="loading_screen" class="page">
</div>
How can I replace "hover" with something like a timer or something. I want to make changes that should happen like on load or like 2 sec after load.
Code:
body {
background: white;
}
div.container {
width: 60%;
height: 1em;
overflow: hidden;
position: absolute;
border-style: none;
border-width: none;
border-color: none;
}
div.content {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
}
div.content:hover {
-webkit-transition: all 5s linear;
-moz-transition: all 5s linear;
-o-transition: all 5s linear;
transition: all 5s linear;
width: 500px;
right: 0px;
text-overflow: clip;
}
<div class="container">
<div class="content">Text text text text text text text text text nb textdfrsdfsdfs dsdfsdfsdfsdfsdf .</div>
Pure CSS solution. You can achieve this via CSS animations:
div {
width: 100px;
height: 100px;
background: red;
/* apply 2 second animation with name "grow" */
/* with 2 second delay */
/* and prevent resetting using forwards value */
animation: grow 2s 2s forwards;
}
#keyframes grow {
from { width: 100px; }
to { width: 300px; }
}
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
Updated for new requirements
For new requirements you just need to duplicate in from and to blocks properties that need to be changed on animation start (text-overflow: clip and right: 0). Demo:
body {
background: white;
}
div.container {
width: 60%;
height: 1em;
overflow: hidden;
position: absolute;
border-style: none;
border-width: none;
border-color: none;
}
div.content {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
/* apply 5 second animation with name "move-text" */
/* with linear timing function and 2 second delay */
/* and prevent resetting using forwards value */
animation: move-text 5s linear 2s forwards;
}
#keyframes move-text {
from {
width: 100%;
text-overflow: clip;
right: 0;
}
to {
width: 500px;
text-overflow: clip;
right: 0;
}
}
<div class="container">
<div class="content">Text text text text text text text text text nb textdfrsdfsdfs dsdfsdfsdfsdfsdf .</div>
setTimeout(() => document.querySelector(".box").classList.add("grow"), 2000)
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: width 2s;
}
.grow {
width: 300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div class="box"></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
u can do sth like this
setTimeout(function(){}, 2000)
the function passed to setTimeout will execute after 2 seconds
See comments inline:
// When the document is ready...
window.addEventListener("DOMContentLoaded", function(){
// Wait 2000 milliseconds and run the supplied function
setTimeout(function(){
document.querySelector(".special").classList.add("delay");
}, 2000);
});
.special {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
.delay {
width: 300px;
}
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div class="special"></div>
You can do like this:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
my-div:hover {
width: 300px;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(function(){$("div").addClass("my-div")},2000);
});
</script>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div class=""></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
You can use onmouseover Event on element. for example:
function hoverFunc(element) {
setTimeout(function() {
element.textContent = "You have unboxed me ";
}, 2000);
}
<div onmouseover="hoverFunc(this)"> hover and unbox me </div>
You could use JavaScript.
HTML:
<!DOCTYPE html>
<html lang="en-US en">
<head>
<meta charset="UTF-8" />
<title>Your Title</title>
</head>
<body>
<div></div>
</body>
</html>
CSS:
div{
width: 100px;
height: 100px;
background: red;
}
JavaScript:
window.addEventListener('load', function(){
setTimeout(function(){
let i = 100;
setInterval(function(){
if(i < 300)
i++;
document.getElementsByTagName('div')[0].style.width = `${i}px`;
}, 5);
}, 2000);
});
I have a keyframe animation which plays when I hover on element. After the mouseout event, it stops too abruptly. How could I force it play till it's end? I tried on.(animationend) event, it doesn't work. Transform origin and huge delay, either don't work. Thanks.
CodePen Demo
class Main {
constructor() {
}
waveOn() {
$(this).addClass('wave-active');
}
waveOut() {
var elem = $('.info__block');
elem.removeClass('wave-active');
}
jsInit() {
$('.info__block').hover(this.waveOn);
$('.info__block').on('animationend', this.waveOut)
}
}
new Main().jsInit();
.info__block {
width: 100px;
height: 100px;
background: aqua;
border-radius: 50px;
position: relative;
display: flex;
justify-content: center;
margin-top: 100px;
}
.info__block:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50px;
border-top: 2px solid aqua;
}
.info__block.wave-active:before {
animation: link-line 2.5s infinite .5s linear;
}
#keyframes link-line {
0% {
transform: translateY(0);
opacity: 1;
}
60% {
opacity: 0;
}
100% {
transform: translateY(-50%) scale(1.6);
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info__block info__block-1">
</div>
Here is a solution to your problem using the native animationiteration event that is described in the W3C Spec for animations. This event is fired after every single iteration of the animation. So, what we are doing is that on hover out, we are attaching the animationiteration event listener (which will get fired only once due to the one). Within this event's listener, I've simply placed the contents of original waveOut function. So, everytime you hover the mouse out of the element, the animation will complete one single iteration (after the hover out has happened) and then stop with that. I think this is a lot more graceful than an abrupt end.
class Main {
constructor() {}
jsInit() {
$('.info__block').hover(function() {
$('.info__block').off('animationiteration'); /* switch off the event handler when you quickly hover back in again */
$('.info__block').addClass('wave-active');
}, function() {
$('.info__block').one('animationiteration', function() {
$('.info__block').removeClass('wave-active');
})
});
}
}
new Main().jsInit();
body {
padding: 200px 200px;
}
.info__block {
width: 100px;
height: 100px;
background: aqua;
border-radius: 50px;
position: relative;
display: flex;
justify-content: center;
}
.info__block:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50px;
border-top: 2px solid aqua;
}
.info__block.wave-active:before {
animation: link-line 2.5s infinite .5s linear;
}
#keyframes link-line {
0% {
transform: translateY(0);
opacity: 1;
}
60% {
opacity: 0;
}
100% {
transform: translateY(-50%) scale(1.6);
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info__block info__block-1">
</div>
(Note: In the above demo sometimes the animation stops after just one iteration during the second and subsequent hover operations. This seems to be some glitch with the Run Snippet window. I don't see this problem happening in the Editor's output window or in this CodePen demo. If you also encounter the same problem let me know and I'll see if there is any fix for it.)
Note: The problem mentioned above has been fixed and the snippet is also updated with the revised code. Revised CodePen Demo.
An infinite animation doesn't have animationend event.
I have never asked anything on this forum before so I'll try to be as clear as possible.
I am trying to show a loading screen while the contents of a div is loading in my website.
I tried to use jQuery .load() function but it seems not to work.
It works when i use the .ready() function but i want to load all the images before to show the div.
So the div is hidden (style="display:none;")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading"> // loading screen </div>
<div id="divtoshow" style="display:none;"> //images and text </div>
<script>
$("#divtoshow").load(function(){
$("#loading").fadeOut(200);
$("#divtoshow").fadeIn(200);
});
//if i replace load with ready it works
</script>
You want to do stuff specifically when all the images on the page have loaded.Try this custom jQuery event...
/**
* Exposes an event called "imagesLoaded" which is triggered
* when all images on the page have fully loaded.
*/
(function($) {
var loadImages = new Promise(function(done) {
var loading = $("img").length;
$("img").each(function() {
$("<img/>")
.on('load', function() {
loading--;
if (!loading) done();
})
.on('error', function() {
loading--;
if (!loading) done();
})
.attr("src", $(this).attr("src"))
});
});
loadImages.then(function() {
$(document).trigger({
type: "imagesLoaded"
});
});
})(jQuery);
It works by copying each image (in the event they are already loaded, this is necessary to catch the load event) and listening for the load on the copy. I got the idea from here.
Here is a fiddle.
If you want to use the .load() method you need to bind it to the img element not to the container:
$("#divtoshow img").on('load', function(){
$("#loading").fadeOut(200, function(){
$("#divtoshow").fadeIn(200)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading">Loading</div>
<div id="divtoshow" style="display:none;"><img src="http://lorempixel.com/350/150"><h1>My Text</h1></div>
If you want the page contents to load before transitioning to display the main page div then you want to us the fundamental document.ready pattern:
<div id="loading"> // loading screen </div>
<div id="divtoshow" style="display:none;"> //images and text
<img src='...a path to a large file....'/>
</div>
and then
<script>
$(document).ready(function() {
$("#loading").fadeOut(200);
$("#divtoshow").fadeIn(200);
});
</script>
In general, if you are doing any element (DOM) manipulation using JQuery and you do NOT havethe document.ready() pattern in place then you should ask yourself if you should maybe add it in. Particularly if you develop with local assets because when you shift to production and network latency has an impact you may find timing issues cause odd bugs in code that worked perfectly when all assets were local.
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;
}
HTML
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
JAVASCRIPT
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide();
});
</script>
The load() method was deprecated in jQuery version 1.8 and removed in version 3.0. you can use window on.load function OR you can also follow the DaniP answer. Here is an example with preloader.
One more problem you are trying to load the #divtoshow which is already display none. So you need to load something that inside on that div
$(window).on('load', function() {
$("#loading").fadeOut();
$("#divtoshow").fadeIn(300);
});
#divtoshow {
display: none;
text-align: center;
}
#loading{
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Add animation to "page content" */
.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}
#-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}
#keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
.img-responsive{
width:100%;
height:auto;
display:block;
margin:0 auto;
}
<div id="loading"></div>
<div id="divtoshow" class="animate-bottom">
<img src="http://orig10.deviantart.net/f6bf/f/2007/054/1/9/website_banner_landscape_by_kandiart.jpg" class="img-responsive" alt="banner "/>
<h2> loaded Title!</h2>
<p>Some text and Image in my newly loaded page..</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm sure this is easy fix. I need that my preloader fade out slowly. I tried with css animation but didn't work. Can somebody tell me how should i do that in javascript ? As you can see in example, the transition is very rough. I don't want that.
<script> <!--Preloader-->
var myVar;
function preloader() {
myVar = setTimeout(showPage, 1500);
}
function showPage() {
document.getElementById("preloader").style.display = "none";
document.getElementById("wrapper").style.display = "block";
}
</script>
CODEPEN EXAMPLE
Add following changes into your codes.
#preloader {
transition:1s ease;
}
#wrapper {
opacity:0;/*Remove display and hide opacity*/
}
function showPage() {
document.getElementById("preloader").style.opacity = 0;
document.getElementById("wrapper").style.opacity = 1;
}
transition doent work with display block and none..
use
var myVar;
function preloader() {
myVar = setTimeout(showPage, 1500);
}
function showPage() {
document.getElementById("preloader").style.opacity = 0;
document.getElementById("wrapper").style.opacity = 1;
}
and
#preloader {
position: absolute;
z-index: 1000;
background-color:black;
width: 100vw;
height: 100vh;
color:white;
transition: 0.5s all linear
}
You can't animate display: none itself, what you can do is animate opacity: 0 for example.
You'll add display: block, while opacity is still 0. After that add opacity: 1 and animate that
Try this example may helps you.
$(function() {
$("#loader-image").fadeIn(500, function() {
$("#loader-image").fadeOut(1000, function() {
$(".loader-container").fadeOut(1000, function() {
alert("loaded!");
});
});
});
});
body {
background-color: black;
}
.loader-container {
background-color: yellow;
height: 200px;
}
#loader-image {
display: none;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<body>
<div class="loader-container">
<img src="image.png" alt="Image" id="loader-image" />
</div>
</body>
You can use a CSS transition.
Change your preloader styles to:
#preloader {
position: absolute;
z-index: 1000;
background-color:black;
width: 100vw;
height: 100vh;
color:white;
display: block;
opacity: 1; // Add opacity
transition: 1s opacity ease-in; // Add transition
}
Add styles for the hidden class:
#preloader.hidden {
opacity: 0;
}
Then when you call showPage()
function showPage() {
// Add the newly defined hidden class to the preloader element
document.getElementById("preloader").classList.add('hidden');
}
Here is a working example.