Posts

[Tutorial] Preloader Splash Page

/in , /by

Website loading speed is a crucial thing to keep an eye out when you develop a project. Using heavy images, large JavaScript files, and having a bloated site in general will result in slow loading speeds for the average user. This might frustrate them, which might force the user to leave the site before they actually have had a look at the content. In the worst case scenario, while the site is loading it might not even display anything, and for a slow loading site and the user might end up leaving.

[flde_special_heading heading_size=”h3″]You can check out and grab the finished code from my codepen.[/flde_special_heading]

[codepen_embed height=”264″ theme_id=”20522″ slug_hash=”LprGLb” default_tab=”result” user=”LordFren”]See the Pen <a href=’http://codepen.io/LordFren/pen/LprGLb/’>A simple preloader splash page</a> by Lord Fren (<a href=’http://codepen.io/LordFren’>@LordFren</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

This code has a simple animation built in. You can use it or you can replace it with your own.

[flde_special_heading heading_size=”h4″]The HTML[/flde_special_heading]

<div class="loader-wrap">
  <div class="loader">
    <div class="loader-logo">
      Put your logo, or custom text here!
    </div>
    <!-- Custom Loading Animation -->
    <div class="loader-inner pulse-ball">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <!-- Custom Animation End-->
  </div>
</div>

Paste this just after the opening <body> tag in your HTML file. We will be using CSS to style all of the elements and animate them. Make sure to not include large files or a lot of graphics here. This has to be as light as possible, so it loads almost instantly for any user.

[flde_special_heading heading_size=”h4″]The CSS[/flde_special_heading]

This is the part where most of the magic happens so let me go through all the important steps.

 

.no-js .loader-wrap {
  display: none;
}
.js .loader-wrap{
  display: block;
}

This part is not mandatory, but I have included nonetheless.

If you are using a browser feature detect method, like Modernizr, you can use this snippet to hide or display the loader overlay depending if the JavaScript is turned Off or On in the browser of the user. If you do not already import detects, you can skip this step. Most of the users will have JavaScript enabled by default and it takes a lot of effort to turn it off nowadays for little to no gain.

 

.loader-wrap{
  background-color: #f05a28;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  position: absolute;
  z-index: 9999;
}

This is the colored background of our loader. position:absolute; takes the contents and the <div> out from the normal flow of the website. We set it to 100% width and 100% height to ensure it will cover the entire site and add a z-index: 9999; to make sure it is always on top.

 

.loader-wrap .loader {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
}

We, again, call for the position:absolute; property to help us position this element to the centre of any screen with top:50%; and left:50%;. If you stop now and check the results you will see that it is not in the centre. This is because we did not take the element width and height into account when we positioned them.

We can actually branch off into 2 directions to solve this problem. We will go over both of them.

For the older method to work we needed to know the exact dimensions of the <div> and add negative margins for it to display in the exact centre. Let’s say this <div> was 200px in width and 100 px in height. What we needed to do was divide these by two and add that as a negative margin to the <div>. For the left margin we take the width of the <div>. 200/2=100 so we needed to add margin-left:-100px;. For the top margin we take the height of the <div>. 100/2=50 so we needed to add margin-top:-50px;. However (and lucky for us!) this is in the past now.

Nowadays we have evolved from the caveman era of CSS to a more civilized solution where we don’t need to know the exact dimensions of the <div> element because we can apply transform: translate(-50%, -50%);. The transform property is always relative to the element that it is being applied to and translate is how you move the <div> into place. It basically calculates the dimensions of the <div> and moves them by a percentage based off of these measurements. Pretty nifty, huh?

[flde_special_heading heading_size=”h4″]The jQuery[/flde_special_heading]

$(window).load(function() {
  $(".loader-wrap").fadeOut("slow");
});

Let me explain the above code in simple terms. After the site ($(window)) finished loading all resources, triggers a function to hide (.fadeOut("slow")) the pre-loader overlay from sight. Making the waiting time and transition easy. I left the fade out animation simple, but if you wish you can add your own animations to make the overlay appear or hide.

[flde_special_heading heading_size=”h4″]The conclusion[/flde_special_heading]

As you can see this is a really easy and quick way to add a pre-loader splash page to your website. Adding this feature to your site will make the experience more pleasant for people who have slower connection speeds.

There are multiple ways to expand on this simple solution. For example, you can add your own animations for when the site finishes loading and the overlay is going to be hidden. Feel free to add your own loading animation and experiment with other functions and features.

Let me know what you think! Share your thoughts and implementations with me on Twitter @LordFren.

 

Update:

The previous version of the code used Absolute positioning (position: absolute;) which caused a few issues:

  • Unless you used a full height page (no scrolling) the scrollbar appeared
  • If you were scrolled down and refreshed the loader did not follow you, meaning it looked broken.

I have replaced the code with position:fixed this will make sure that the overlay will always cover the site completely.

Known issues

If the JavaScript is disabled in the browser this method will leave the site hanging… (Who does this?! – Editor).

To ensure compatibility for users without JavaScript you should always include Modernizr or similar piece of code to ensure JavaScript support.

The scrollbar is always visible on pages that are larger than the viewport.

This is not really an issue but if you want to remove the scrollbar you can expand the script a bit.

  • Add an overflow:hidden; to the body tag to disable scrollbars altogether.
  • Using the already added JavaScript you can re-enable the overflow after the loading is done by setting overflow:auto;
$(window).load(function() {
  $(".loader-wrap").fadeOut("slow");
  $("html, body").css('overflow', 'auto'); 
});