add-loader-to-website
CSS HTML Javascript Web Development

How to Add Loading Animation to Website in 2 Minutes

In this tutorial, I’m going to show you how to add a loading animation to your website and remove it when everything is loaded. Let’s check it out! (All source code at the end of this post)

Simulate Loading Delay

how-to-add-loader-to-website-2

So our example page have just a div with an image. But this is not just a regular image. It’s a random image from external source (picsum.photos) that change every time you refresh. This is to prevent the browser from caching it so we can simulate the loading time on local server.

<div class="content">
     <img src="https://picsum.photos/300/300/?random" />
</div>

Loading Animation

And here is loader I found on codepen that I want to add to my website.

how-to-add-loader-to-website-1

I’m going to copy over the code for both HTML and CSS and then create a wrapper around it. (Full source code below)

<div class="loader-wrapper">
    <span class="loader"><span class="loader-inner"></span></span>
</div>
.loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #242f3f;
  display:flex;
  justify-content: center;
  align-items: center;
}

I want to loader to cover the entire page when it’s loading, so I’ll set the width and height to 100%. then set the position to absolute and zero top/left. Also add background color as well.

.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  top: 50%;                       /******** <- Remove this line *********/
  border: 4px solid #Fff;
  animation: loader 2s infinite ease;
}

The original code use 50% top to center the loader. I’ll remove it and use flex layout to center the cube loader instead.

how-to-add-loader-to-website-3

Load Event

The loading Animation is ready. Next we’ll need hide it when the loading is complete. We can do that by listening to window load event which will trigger when all the elements have been completely loaded. Then use jQuery fadeOut method to hide the loader.

$(window).on("load",function(){
     $(".loader-wrapper").fadeOut("slow");
});

And that’s it! Very simple and straightforward. See the result in the video below.

Hope it helps! Also don’t forget to subscribe our Youtube Channel or follow us on Facebook to stay tune for more tutorial like this. Bye 🙂

Full Source Code

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="jquery-2.1.4.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <div class="content">
      <img src="https://picsum.photos/300/300/?random" />
    </div>

    <div class="loader-wrapper">
      <span class="loader"><span class="loader-inner"></span></span>
    </div>

    <script>
        $(window).on("load",function(){
          $(".loader-wrapper").fadeOut("slow");
        });
    </script>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
  width:100vw;
  height: 100vh;
  background-color: #eee;
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;
}
.loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #242f3f;
  display:flex;
  justify-content: center;
  align-items: center;
}
.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #Fff;
  animation: loader 2s infinite ease;
}
.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
  0% { transform: rotate(0deg);}
  25% { transform: rotate(180deg);}
  50% { transform: rotate(180deg);}
  75% { transform: rotate(360deg);}
  100% { transform: rotate(360deg);}
}

@keyframes loader-inner {
  0% { height: 0%;}
  25% { height: 0%;}
  50% { height: 100%;}
  75% { height: 100%;}
  100% { height: 0%;}
}

 

One comment

Leave a Reply

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