Post
Ask Question

Adding A Loading Page To A Website

Introduction

 
Waiting for apps or webpages to load is boring for users. Playing animations helps users feel engaged when we load our content. It's cool to make loading animations more fun and beautiful. Here, we discuss how to add a loading animation to a webpage.
 
This article is meant for absolute beginners in web development. Here we are taking an animation designed by Prathamesh Koshti using HTML + CSS and adding this animation as a loading page animation for the webpage. Also, we see how to add a gif animation as a loading animation, which is designed by Hassan Alkhateeb.
 
Below is how the loading page with animation designed by Hassan Alkhateeb looks:


The second type of loading page with animation designed by Prathamesh Koshti will look like shown below:

 
Let's make it happen step by step...
 
Step 1
 
Open any IDE here. I use VS Code which is free and developed by Microsoft.
 
Step 2
 
Create a project. In VS Code Add a workplace folder, open Explorer and add new file index.html
 
Step 3
 
Code the home webpage you need in index.html. Here, for the purpose of simplicity, I'm using a simple webpage with only a title. The HTML+CSS of this is shown below.
  1. <html>  
  2.    <head>  
  3.        <title>My Web Page</title>  
  4.    </head>  
  5.    <body style="background-color: black;">  
  6.        <H1 style="color:white;text-align: center;padding: 300px;">My Website</H1>  
  7.    </body>  
  8. </html>   
Step 4
 
Do either step 4.1 or 4.2.
 
Step 4.1
 
Code the loading animation you need. The animation can be HTML+CSS+JS or a gif image.
 
Here as mentioned earlier I'm using an animation designed by Prathamesh Koshti. You can get it from codepen. Copy the HTML to the body of index.html and CSS inside style tag inside the head tag.
 
Step 4.2
 
Get the gif with the loading animation you need.
 
Here as mentioned earlier I'm using a gif designed by Hassan Alkhateeb. You can get the same from behance. Download the image and save it in the project root folder. Add the below code after the opening of the body tag and replace the src value with the relative path of the gif you want to use:
  1. <div class="container">  
  2.    <img src="<relative path to the loading gif>" alt="">  
  3. </div>  
Step 5
 
Add the below script to end of head tag. This will include jQuery v 3.5.1 and $(window).on('load', function () {}); to trigger the loading animation at the time of loading:
  1. <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
  2. <script>  
  3.    $(window).on('load', function () {  
  4.        $(".container").fadeOut("slow");  
  5.   });  
  6. </script>   
Yola! Now you must be able to see the animation while the webpage loads. As the webpage is light you might not see the loading screen for a long time, since the loading finishes too soon.
 
Here is the full code if you use HTML+CSS animation designed by Prathamesh Koshti. Courtesy: Prathamesh Koshti -Codepen
  1. <html>  
  2. ​  
  3. <head>  
  4.    <title>My Web Page</title>  
  5.    <style>  
  6.       :root {  
  7.            --yellow: #feb60a;  
  8.            --red: #ff0062;  
  9.            --blue: #00dbf9;  
  10.            --violet: #da00f7;  
  11.       }  
  12. ​  
  13.        body {  
  14.            margin: 0;  
  15.            display: flex;  
  16.            justify-content: center;  
  17.            align-items: center;  
  18.            height: 100vh;  
  19.            background-color: #1a1940;  
  20.            background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 153, 212, 0) calc(15% + 100px), rgba(0, 99, 138, 0) calc(85% + 100px), rgba(0, 0, 0, 0.15) 100%);  
  21.       }  
  22. ​  
  23.        div.container {  
  24.            display: flex;  
  25.            justify-content: center;  
  26.            align-items: center;  
  27.       }  
  28. ​  
  29.        div>div {  
  30.            width: 3vw;  
  31.            height: 3vw;  
  32.            border-radius: 100%;  
  33.            margin: 2vw;  
  34.            background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0) 100%);  
  35.            animation: bounce 1.5s 0.5s linear infinite;  
  36.       }  
  37. ​  
  38.        .yellow {  
  39.            background-color: var(--yellow);  
  40.       }  
  41. ​  
  42.        .red {  
  43.            background-color: var(--red);  
  44.            animation-delay: 0.1s;  
  45.       }  
  46. ​  
  47.        .blue {  
  48.            background-color: var(--blue);  
  49.            animation-delay: 0.2s;  
  50.       }  
  51. ​  
  52.        .violet {  
  53.            background-color: var(--violet);  
  54.            animation-delay: 0.3s;  
  55.       }  
  56. ​  
  57.        @keyframes bounce {  
  58. ​  
  59.            0%,  
  60.            50%,  
  61.            100% {  
  62.                transform: scale(1);  
  63.                filter: blur(0px);  
  64.           }  
  65. ​  
  66.            25% {  
  67.                transform: scale(0.6);  
  68.                filter: blur(3px);  
  69.           }  
  70. ​  
  71.            75% {  
  72.                filter: blur(3px);  
  73.                transform: scale(1.4);  
  74.           }  
  75.       }  
  76.    </style>  
  77.    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
  78.    <script>  
  79.        $(window).on('load', function () {  
  80.            $(".container").fadeOut("slow");  
  81.       });  
  82.    </script>  
  83. </head>  
  84. ​  
  85. <body style="background-color: black;">  
  86.    <div class="container">  
  87.        <div class="yellow"></div>  
  88.        <div class="red"></div>  
  89.        <div class="blue"></div>  
  90.        <div class="violet"></div>  
  91.    </div>  
  92.    <H1 style="color:white;text-align: center;padding: 300px;">My Website</H1>  
  93. </body>  
  94. ​  
  95. </html>   
Here is the full code if you use the gif animation designed by Hassan Alkhateeb. Courtesy:Hassan Alkhateeb-Behance
  1. <html>  
  2. ​  
  3. <head>  
  4.    <title>My Web Page</title>  
  5.    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
  6.    <script>  
  7.        $(window).on('load', function () {  
  8.            $(".container").fadeOut("slow");  
  9.       });  
  10.    </script>  
  11. </head>  
  12. ​  
  13. <body style="background-color: black;">  
  14.    <div class="container">  
  15.        <img src="loading.gif" alt="">  
  16.    </div>  
  17.    <H1 style="color:white;text-align: center;padding: 300px;">My Website</H1>  
  18. </body>  
  19. ​  
  20. </html>  

Summary

 
Here, we learned how to design a loading page with animations in HTML+CSS format or GIF format. Also, we saw how to make it as a loading page animation for our website. Now you can use animations in HTML+CSS format or GIF format to make your website look cool by adding a loader.
 
Hope it helped. Stay tuned for more articles on web development.


Similar Articles