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:
|
1 |
<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:
|
1 2 3 4 5 6 7 8 |
<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:
|
1 2 3 4 5 6 7 8 |
$(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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.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.
Koren Leslie Cohen
Latest posts by Koren Leslie Cohen (see all)
- 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
- Front End Engineer Interview Questions - July 20, 2015
jcdaryl says
March 1, 2015 at 5:48 amhi 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?
Koren Leslie Cohen says
March 1, 2015 at 6:07 amYou’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.
jcdaryl says
March 1, 2015 at 7:33 amThank 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,
Koren Leslie Cohen says
March 2, 2015 at 2:02 pmYou probably want to check for a session cookie to determine if the site has been previously accessed. Lots of info on this on Google.
Şerif says
June 28, 2015 at 7:05 pmKoren, Thanks for the share useful example 🙂
Brendan says
October 3, 2015 at 10:42 amThis isn’t a pre-loader. It’s a timer image, which is useless.
Aleks says
June 9, 2016 at 2:35 pmHere’s a good cross-browser preloader, suitable for mobile browsers: https://github.com/Error-256/svg-preloader
Kamrul says
June 14, 2016 at 11:54 amThanks. Works well. Easy to implement. Anyway, is there any way to customize white background while preloading?
Janelle says
August 7, 2017 at 2:03 amHi Koren,
I copied the codes from the above steps. However, the preloader cannot fade out and keep displaying.
Thanks
Ashley says
March 19, 2018 at 2:39 pmThank you for sharing this script, Koren. Very helpful.
Koren Leslie Cohen says
April 19, 2018 at 8:57 pmGlad it helped!
Sp says
June 8, 2018 at 7:44 amSorry. 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.