Koren Leslie Cohen

  • About
  • Blog
  • Contact

12 comments

CSS, JavaScript

Page Preloader with CSS and JavaScript

February 16, 2015 by Koren Leslie Cohen

preloader

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.

  • About
  • Latest Posts
Connect
Koren Leslie Cohen
Product manager at Facebook. Former senior product manager at Dollar Shave Club in Los Angeles and software engineer at J.Crew / Madewell in New York City. Recovering trial lawyer.
Connect
Latest posts by Koren Leslie Cohen (see all)
  • 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

Related Posts

CSS Overlay: How to Create a Simple CSS Overlay
Pausing a JavaScript Loop

Share

Facebook Google+ Twitter Pinterest Email

Comments Cancel reply

Your email address will not be published. Required fields are marked *

*

code

  1. jcdaryl says

    March 1, 2015 at 5:48 am

    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?

    Reply
    • Koren Leslie Cohen says

      March 1, 2015 at 6:07 am

      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.

      Reply
      • jcdaryl says

        March 1, 2015 at 7:33 am

        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,

        Reply
        • Koren Leslie Cohen says

          March 2, 2015 at 2:02 pm

          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.

          Reply
  2. Şerif says

    June 28, 2015 at 7:05 pm

    Koren, Thanks for the share useful example 🙂

    Reply
  3. Brendan says

    October 3, 2015 at 10:42 am

    This isn’t a pre-loader. It’s a timer image, which is useless.

    Reply
  4. Aleks says

    June 9, 2016 at 2:35 pm

    Here’s a good cross-browser preloader, suitable for mobile browsers: https://github.com/Error-256/svg-preloader

    Reply
  5. Kamrul says

    June 14, 2016 at 11:54 am

    Thanks. Works well. Easy to implement. Anyway, is there any way to customize white background while preloading?

    Reply
  6. Janelle says

    August 7, 2017 at 2:03 am

    Hi Koren,
    I copied the codes from the above steps. However, the preloader cannot fade out and keep displaying.
    Thanks

    Reply
  7. Ashley says

    March 19, 2018 at 2:39 pm

    Thank you for sharing this script, Koren. Very helpful.

    Reply
    • Koren Leslie Cohen says

      April 19, 2018 at 8:57 pm

      Glad it helped!

      Reply
  8. Sp says

    June 8, 2018 at 7:44 am

    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.

    Reply

Back to Blog

  • GitHub
  • Instagram
  • LinkedIn
  • RSS
  • Twitter

Looking for something?

Copyright 2023 Koren Leslie Cohen