How to add page loading animation to your website



Since it is the first blog on this site it reminds me of one of the first thing you see when opening a website. It is the page preloader.

What’s a preloader?

Preloaders (also known as loaders) are what you see on the screen while the page’s content is still loading. Preloaders are often simple or complex animations that are used to keep visitors entertained while server operations finish processing. Unfortunately, they are also frequently overlooked in the development process of most projects.

Why is a preloader important?

Preloaders are important interface elements that let visitors know that the website hasn’t crashed, it’s just processing data.

In tutorial you can learn how to put a page pre-loader or loading animation to a webpage.

To make this tutorial very simple we are making a simple loading animation like this one.

Page preloader


It is just a basic one as I said. Let’s move into the coding part.

Before Starting

It need jQuery in order to work properly.
First we add the code for loading animation into the html and use css to style it. After that with some help of jQuery we check whether the page is fully loaded or not. When the script says the page is loaded we hide the loading animation again with the use of javascript and display the sites's content.

But there is a problem, some people have disabled javascript on their web browser. Due to this, the loading animation will be still visible after the page is loaded. To overcome this problem we are going to simply disable the preloader for such users.

How?

In this scenario we are taking advantage of the <noscript> tag. Using this tag we make sure the animation stays hidden in their web browser so they can also view the page content without any problem.

Let’s start

1. Adding Loading animation code into html

This step is very easy, add the following code right after the <body> tag to make sure it gets shown first.
<div id="overlay">
  <div class="container">
    <span class="loadtext">LOADING</span>
    <div class="spinner"></div>
  </div>
</div>
This is the code for elements like the loading spinner and the overlay for hiding the webpage contents.

2. Styling the preloader 

Add the following code in the css file of the webpage
#overlay {
  font-family: monospace;
  background: #f0f0f0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
.container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loadtext {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fadeinout 1.5s ease-in-out infinite;
  font-size: 25px;
}
.spinner {
  border: solid 25px #fff;
  border-top: solid 25px #0088ff;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  animation: spin 1s linear infinite;
}
@keyframes fadeinout {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
This is styling added to the elements and animation using css keyframes.

3. Adding javascript

As I said in the beginning, we need to add jQuery to the page. To do that you need to download jquery.min.js and put it in the same folder where the webpage is located. Then put this code in the <head> section:
<script src="jquery.min.js"></script>
In the next line add the following:
<script>
$(document).ready(function() {
  $("#overlay").delay(500).fadeOut();
});
</script>

This script check whether the page is finished loading. When it says yes the script hides the content in div with the id=”overlay”.

For those with the javascript function disabled we have to add the following in the next line:
<noscript><style>#overlay {display: none;}</style></noscript>
This line make sure the preloader is hidden to javascript disabled browsers.

Demo

Finished

Glad you made it to the end.
Ask doubts in the comments.

Comments

Post a Comment