# Add Website Loading Animation: a comprehensive guide
In the fast-paced world of web development, creating an engaging and seamless user experience is important. One effective way to achieve this is by implementing a loading animation on your website. In this tutorial, we'll explore the step-by-step process of creating a visually appealing loading spinner using HTML, CSS, and JavaScript—no jQuery required!
## **Why Loading Animations Matter**
![](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExOHp4dXh3d211ZmlsNmw3MXBtdTlraW14Mndrb2IzZ2J2NXpvOWVrMiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l3nWhI38IWDofyDrW/giphy.gif align="center")
Loading animations not only serve a practical purpose by indicating to users that your page is loading, but they also contribute to the overall aesthetics of your website. A well-designed loading animation can create a positive first impression, keeping users engaged during the brief loading period.
## **The Tools We'll Use**
Before we dive into the tutorial, let's briefly go over the tools we'll be using:
* **HTML**: The structure of our web page.
* **CSS**: Styling to make our loading animation visually appealing.
* **JavaScript**: Dynamic behavior to control when the loading animation appears and disappears.
# Before starting:
If you prefer watching videos then you can watch this video to understand how the loader is integrated seamlessly into a website.
%[https://www.youtube.com/watch?v=kG4oZJSlPrw]
But if you prefer reading then let's code the loader together.
### **Step 1: Setting Up the HTML**
Start by creating the HTML structure of your page. For simplicity, we'll create a loading div that will house our animation:
```xml
Your Website
Hi, there
I am the content.
```
In the above code, you see we have a `loader` with a `loader-wrapper` and a `content-container`. The loader is the loader and the content-container houses all of your code that you use while making a website.
**Step 2: Styling with CSS**
Now, let's add some styles to make our loading animation visually appealing. Create a new file called `styles.css`:
```css
.loader-wrapper{
height: 100vh;
width: 100%;
position: fixed;
top:0;
left:0;
display: grid;
place-items: center;
background-color:#fff;
}
.loader {
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
```
The above CSS code will make a simple CSS loading animation. If you want a more customized and modern loader on your website then you can code your own or use from [https://css-loaders.com/](https://css-loaders.com/) website. They have hundreds of great CSS animations, with source code folk.
Now that you have a loader with loading animation, we need to hide the content container i.e. the div with the id `content-container:`
```css
#content-container {
display: none; /* Hide the loading container by default */
}
```
Now when the loading animation is complete or when our HTML page is completely loaded, we need to show the content, right? I think so.
So to show the content, you can use display property with any values except *none.* For now, we are going to use the *block* value:
```css
#content-container.show {
display: block; /* Display the loading container when 'show' class is added */
/* Add your animation styles here; this is great if you want to show content with animation/transition */
}
```
So our final CSS file AKA `style.css` should look like this:
```css
.loader-wrapper{
height: 100vh;
width: 100%;
position: fixed;
top:0;
left:0;
display: grid;
place-items: center;
background-color:#fff;
}
.loader {
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#content-container {
display: none; /* Hide the loading container by default */
}
#content-container.show {
display: block; /* Display the loading container when 'show' class is added */
/* Add your animation styles here */
}
```
### **Step 3: Adding JavaScript Logic**
Time to add dynamic behavior! Create a new file called `script.js` and add this code to your new file.
```javascript
const content = document.getElementById("content-container");
const loader = document.querySelector(".loader-wrapper");
window.onload = function () {
content.classList.add("show");
loader.style.display = "none"
};
```
So what the above code does is: There is a function that runs when the page is fully loaded. When the function is executing, we'll add `show` class to the `content-container` which will make the content visible (refer to CSS code if you don't understand). Then we add a style property of `display: none;` to our loader-wrapper that will just make our loader go kaboom; in other words, make it disappear. Now we have a complete CSS loader on our website.
### **Step 4: Customize Your Animation**
Feel free to customize the loading animation by adding your styles and adjusting the timing. Again, I am referring to [https://css-loaders.com/](https://css-loaders.com/) website. They really have good CSS animations.
**And this is what our final product looks like (play with pen and reload to see loader):**
%[https://codepen.io/aashishpanthi/pen/gOEzVzB]
## **Conclusion**
Congratulations! You've successfully implemented a loading animation on your website using HTML, CSS, and JavaScript. By providing users with a visually pleasing loading experience, you've taken a significant step toward enhancing your website's overall appeal.
Remember, a positive user experience goes a long way in retaining visitors and encouraging them to explore your site further. Happy coding!