PreLoadMe, a lightweight jQuery website preloader
PreLoadMe is a lightweight preloader for any webcontent. Powered by jQuery and CSS it is fully responsive and will run on all modern desktop- and mobile browsers with no additionals plugins. PreLoadMe displays a loading animation until the browser fetched the whole webcontent and will fade out the moment the page has been completely chached. Because the simplicity of PreLoadMe, it can be easily customized and adapted to your needs.
PreLoadMe displays a loading animation until the browser fetched the whole web content and will fade out the moment the page has been completely cached. Because the simplicity of PreLoadMe, it can be easily customized and adapted to your needs.
You can see a live preview here: PreLoadMe Live Preview
Implementation
PreLoadMe is jQuery driven. You will need to implement an up to date jQuery version and the corresponding JavaScript for executing the preloader. Add the following code right before the </body> tag.
<!-- jQuery Plugin -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<!-- Preloader -->
<script type="text/javascript">
//<![CDATA[
$(window).on('load', function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
//]]>
</script>
The CSS-Markup will help you style the preloader. Make sure to include it on your website.
body {
overflow: hidden;
}
/* Preloader */
#preloader {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-image:url(../img/status.gif); /* path to your loading animation */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
}
Finally place the following HTML Code directly after the <body> tag.
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
The outer DIV preloader will be called from the CSS file and will cover the entire website with a white DIV. The inner DIV status will show the loading animation. Also you should not forget to give your document a proper doctype. Otherwise the preloader might not work.
Using with AJAX requests
If you want to show preloader during AJAX request you can use the following CSS code.
#preloader {
position:fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-image:url(../img/status.gif); /* path to your loading animation */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
}
Your Javascript code will look like:
$("#status").fadeIn();
$("#preloader").fadeIn();
$.get(url, data, function(){
$("#status").fadeOut();
$("#preloader").fadeOut();
});
The source package contains all relevant files and a working demonstration.
Credits
Please support humans.txt (http://humanstxt.org/). It's an initiative for knowing the people behind a website. It's a TXT file that contains information about the different people who have contributed to building the website.
PreLoadMe: https://github.com/niklausgerber/PreLoadMe
Niklaus Gerber
Twitter: @niklausgerber
URL: https://www.niklausgerber.com
Location: Zürich, Switzerland
Download, Fork, Commit.
If you think you can make this better, please Download, Fork, & Commit. I'd love to see your ideas.
Donation
I love to create and I won't ask for repayment. If you appreciate my work and would like to support me I am sure you will earn some extra Karma points. Please donate.
.png)
Does not work with later JQuery version
<!--Preloader--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>This does not work, hower version 1.6 does work.
preloader appearing late
hi nik! thanks for the preloader. I used it on a couple of projects, but in one in particular it appears a split second too late making the use of the preloader.. useless :) i used the preloader to mask the DOM while it paints but if the preloader appears too late there's no sense in using it. I've tried two preloaders on this particular project and i always get it appearing too late. could you help with this issue? why is it apearing late?
live project: www.valeriopierbattista.com/cv the code (index file): https://github.com/vlrprbttst/valeriopierbattista-cv/blob/master/html/index.html
thanks for your time!
doesn't work with
Hello,
never stops loading, and data transfer shows video is not being downloaded.
i have it like:
loads on every other browser i've tried. any workarounds?
jQuery website preloader
The link which is supposed to take us to the plugin's website seems to point to some blog post about how to make money? I did not read the whole thing(as I'm not interested), just the heading, could you please fix that? or am I missing something?
Show the Preloader only when cookie is not set.
Hi,
I've asked this question on stackoverflow because I want to show the preloader only once and not every reload of the page. The prelaoder doesn't need to show after a while or atleast a day or after the user destroyed the cache.
Here is the javascript that I'm using to hide the preloader if the cookie is set.
however, the preloader still shows up. Can anybody solve this case?
Delay in displaying white div css mask
I get about a .5ms flash of the website loading then the white DIV comes in, followed with the loader. I am trying to use it in a Shopify theme I'm building based off the Timber framework.
Any Ideas?
https://heimur-furniture.myshopify.com/ Password: toycar23
Added css to use preloader with AJAX requests
I added css for using preloader with AJAX requests. So you can call preloader at any time, not only during initial loading of the page. The difference is that #preloader div covers the whole page, not only the display size.
Not working in IE
I figured that the script will not work for Internet Explorer if you are missing a proper doc type for your html document. Make sure you include to your document.