There are many advantages of adding a preloader to your website. Not only can this produce a nice visual effect, it can, more importantly, allow time for images and other assets to load.
To see a live example of what the below code will produce, visit CONSIGN.NYC, a Rails application in which I added the below preloader to all pages.
Gif
The first thing you’ll need is a loading gif. There are several websites where you can download and/or create free preloader gifs.
HTML
Add the following code to your HTML on the page you would like the preloader to appear:
<div class="preloader"><span class="preloader-gif"></span></div>
If you’re working with a framework like Rails, you can add this to application.html.erb and all pages will display the preloader:
<body> <%= render 'layouts/header' %> <div class="preloader"><span class="preloader-gif"></span></div> <%= yield %> <%= render 'layouts/footer' %> </body>
JavaScript
Create a preloader.js file which includes the following code:
$(document).ready(function () {
// preloader
$(window).load(function(){
$('.preloader').delay(400).fadeOut(500);
})
})
This function displays the preloader gif when the window loads, briefly delays the remaining content from displaying, and then fades out the preloader (which simultaneously fades in the page below).
CSS
Create a preloader.css file which includes the following code:
.preloader{
position: fixed;
top:0;
left:0;
bottom: 0;
right: 0;
background: #fff;
z-index: 99999;
}
.preloader .preloader-gif{
display: block;
width: 80px;
height: 80px;
position: absolute;
top: 50%;
left: 50%;
margin: -40px 0 0 -40px;
background: url('preloader.gif') no-repeat;
}
You will have to customize the dimensions of the .preloader-gif, as well as the margin. For example, if your gif is 50 x 50 pixels, you will want to set the margin to margin: -25px 0 0 -25px; to properly center it in the browser.
You can also use a preloader when making AJAX calls. As a fun variation, you could load a wallpaper or pattern instead of a preloader gif.
- PM Career Story - April 28, 2022
- How to Transition into Product Management - December 26, 2017
- What I’ve Learned in My First Few Months as a Product Manager - October 14, 2015
hi Koren, thank you for sharing the script. I would like to know if you can help me on this. What can i do to make the preloader show only once when entering the website?
You’re welcome.
Also, if you don’t want to center the preloader using a margin based on the size of the preloader, you can use CSS translate, which is pretty cool.
I don’t know what type of website you’re building, but you should be able to call that function only a single time.
Thank you for your reply. This is what i’m trying to built right now. http://jdcdesignstudio.com/site/doeadeer-new/index.php what i want is, the preloader will only visible in the 1st time accessing your website. When they clicked home again, the preloader is disabled. I’m not sure if that works? thanks!
best regards,
You probably want to check for a session cookie to determine if the site has been previously accessed. Lots of info on this on Google.
Koren, Thanks for the share useful example 🙂
This isn’t a pre-loader. It’s a timer image, which is useless.
Here’s a good cross-browser preloader, suitable for mobile browsers: https://github.com/Error-256/svg-preloader
Thanks. Works well. Easy to implement. Anyway, is there any way to customize white background while preloading?
Hi Koren,
I copied the codes from the above steps. However, the preloader cannot fade out and keep displaying.
Thanks
Thank you for sharing this script, Koren. Very helpful.
Glad it helped!
Sorry. I’m using Rails, I’ve followed the steps but the preloader never fades out. It seems just like an image which fills the full page and does not let you do anything.