I just created my own loading screen with this code:
HTML CODE: <div class="loader"></div>
CSS CODE: .loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../Images/page-loader.gif) 50% 50% no-repeat rgb(249,249,249);}
jQuery CODE: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
AND
$(window).load(function() {
$(".loader").fadeOut("slow");})
Each time the page loads, the loading screen only displays for a fraction of a second. Im trying to display the loading screen at least 3 seconds. What jQuery code should I add?
use setInterval
$(window).load(function() {
setInterval(function() {
$(".loader").fadeOut("slow")
}, 3000);
});
To delay the fadeOut action you can use the delay() function in jQuery
https://api.jquery.com/delay/
This will delay your fadeout by 3s (3000ms).
$(window).load(function() {
$(".loader").delay(3000).fadeOut("slow");
})
Related
I need some help. So there is this page that is using an iframe, for that reason the Cumulative Layout shift is pretty noticeable. So we wanted to use a preloader so that you cant see that. But the preloader code only shows the preloader for like 100ms. I wanted to change this is so I added this code in between the script tag. But now the preloader isn't going away at all. Just spinning on forever
This is the code:
jQuery(document).ready(function($) {
$(window).load(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {});
}, 200); // set the time here
});
});
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://example.com/example.svg') 50% 50% no-repeat #aa9767;
/* Change the #fff here to your background color of choice for the preloader fullscreen section */
}
.elementor-editor-active .loader {
display: none;
}
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<div class="loader"></div>
Two things seems wrong:
Your selector seems wrong, I am assuming its meant to be .loader
The function parameter in document.ready doesn't take parameters
jQuery(document).ready(function() {
$(window).load(function() {
setTimeout(function() {
$('.loader').fadeOut('slow');
}, 200); // set the time here
});
});
I'm using this code to make loading screen appears for 1 sec then disappears
,but It's keep loading
CSS
.preloader {
overflow: auto;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fefefe;
}
JS
jQuery( window ).load(
function() {
jQuery( '.status' ).fadeOut();
jQuery( '.preloader' ).delay( 1000 ).fadeOut( 'slow' );
setTimeout( zerif_display_iframe_map, 500 );
}
);
Use a default setTimeout from Javascript. In the documentation of jQuery.delay() it says:
The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
You also should check up on how to use the document.ready function, I had to clean this up to get it to work.
$(function() {
jQuery('.status').fadeOut();
setTimeout(function() {
jQuery('.preloader').fadeOut('slow');
}, 1000);
});
.preloader {
overflow: auto;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="status"> I fade out </p>
<div class="preloader"></div>
<p> I'm blocked by a design from 1999, aka preloader </p>
You could generate the necessary containers and elements via javascript and remove them once the page has successfully loaded.
Furthermore, you don't even need jquery, you could do it in plain vanilla javascript and pure css, which would likely be faster, and smaller.
Instead of using an image we can generate an svg with javascript, for better overhaul performances.
I worked on something similar a while back, it will automatically generate all the necessary component to get the perfect loading screen. Place the following <script> near the end of your pages, right before the closing </body> tag
var t="#2774ab",u=document.querySelector("*"),s=document.createElement("style"),a=document.createElement("aside"),m="http://www.w3.org/2000/svg",g=document.createElementNS(m,"svg"),c=document.createElementNS(m,"circle");document.head.appendChild(s),(s.innerHTML="#sailor {background:"+t+";color:"+t+";display:flex;align-items:center;justify-content:center;position:fixed;top:0;height:100vh;width:100vw;z-index:2147483647}#keyframes swell{to{transform:rotate(360deg)}}#sailor svg{animation:.3s swell infinite linear}"),a.setAttribute("id","sailor"),document.body.prepend(a),g.setAttribute("height","50"),g.setAttribute("filter","brightness(175%)"),g.setAttribute("viewBox","0 0 100 100"),a.prepend(g),c.setAttribute("cx","50"),c.setAttribute("cy","50"),c.setAttribute("r","35"),c.setAttribute("fill","none"),c.setAttribute("stroke","currentColor"),c.setAttribute("stroke-dasharray","165 57"),c.setAttribute("stroke-width","10"),g.prepend(c),(u.style.pointerEvents="none"),(u.style.userSelect="none"),(u.style.cursor="wait"),window.addEventListener("load",function(){setTimeout(function(){(u.style.pointerEvents=""),(u.style.userSelect=""),(u.style.cursor="");a.remove()},100)})
You can check the latest version here https://github.com/amarinediary/Sailor with all it's documentation.
Situation:
I am looking for a jquery/ajax loader and found this thread helpful.
Now I am using this fiddle as my loader.
Everything works fine but I only have one concern.
Below the js code, 'responseTime' is fixed to 2.5 secs.
$.mockjax({ url: "/mockjax", responseTime: 2500 });
So if my page loads more than 5 secs, the loader only runs at 2.5 secs.
Question:
How am I going to depend the loader's time to my page's unpredictable loading time?
Your help is very much appreciated. Thanks!
You can show loader gif until window loads completely by
$(window).load(function(){
}
And do it like:
$(window).load(function(){
$('#cover').fadeOut(1000);
});
#cover {
background: url("http://www.aveva.com/Images/ajax-loader.gif") no-repeat scroll center center #FFF;
position: absolute;
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cover"></div>
<img src="https://i.ytimg.com/vi/lklDJ5VRQao/maxresdefault.jpg" />
It will start with showing gif and will be faded out once content gets loaded completely.
I found what I'm looking for from this site.
Below is the code I use.
$(document).ready(function(){
$("#spinner").bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxStop", function() {
$(this).hide();
}).bind("ajaxError", function() {
$(this).hide();
});
$('#button-upload').click(function() {
$('#spinner').show();
});
});
.spinner {
position: fixed;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
text-align:center;
z-index:1234;
overflow: auto;
width: 100px;
height: 102px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="spinner" class="spinner" style="display:none;">
<img id="img-spinner" src="http://sampsonresume.com/labs/pIkfp.gif" alt="Loading"/>
</div>
<input type = "submit" value = "Upload" id="button-upload" />
The loader is indefinite in this snippet, but it runs perfectly on my site.
Thanks guys for the help anyway =)
The method that I invoke:
vm.progress = function () {
$('.progress-line').width('100%').animate({ width: 0 }, 5, 'linear', 1000);
}
HTML:
<div class="progress-outer">
<div class="progress-line red"></div>
</div>
CSS:
.progress-outer {
position: relative;
height: 10px;
width: 100%;
}
.progress-line {
position: absolute;
height: 100%;
width: 0;
}
It has to animate progress bar from 100% to 0 in 5 secs. But it doesn't work. However, if I separate methods into two functions and invoke them by clicking on button (and only), it works.
You wrote wrong syntax to chaining animate function check the below code
setInterval(function () {
$(".progress-line").animate({width:
"100%"},5000).animate({width:"0%"},6000);
},5000);
Check working demo jsfiddle
For Time limit, you should use
$(".progress-line").animate({width: "100%"},5000); // time 5000 is in milliseconds
Here is the fiddle that may help you. I use background colors to show the animation
https://jsfiddle.net/simerjit/rgskzcj5/2/
Check jquery animate function details here... http://www.w3schools.com/jquery/eff_animate.asp
I would like to show a loading spinner before any of the page elements load, and then load the page elements while the loading overlay is still on. Is this possible? I am using this code but the page still loads elements before the spinner shows up.
$(document).ready(function () {
setTimeout(function () {
$.loader.close();
// Do something after 5 seconds
}, 3000);
});
Add the below div right below the opening <body> tag.
<div class="loader"></div>
Add some .css
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}
And jquery in header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
At the end, look after a loading gif image. Google is full :)