Introduction:
In the world of web development, creating loading animations is a common task. These animations provide a visual cue to users that something is happening in the background. In this tutorial, we will create a simple loader animation using HTML, CSS, and JavaScript. By the end of this tutorial, you will have a basic understanding of how to build a loading animation and customize it to fit your project’s needs.
Things You Will Learn:
- How to structure a project folder.
- Creating the HTML structure for a loader animation.
- Styling the loader animation with CSS.
- Implementing the JavaScript logic for the loader animation.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather reading a blog post you can check out the video down below. Also subscribe to my YouTube channel where I post new tutorials every alternate day.
Project Folder Structure:
Now before we move on to actual coding we create a project folder structure. We name the project folder as – ”Image Loading Blur Effect”. Within this folder, we have 3 files. These files are:
- index.html
- style.css
- script.js
- image
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Loading Blur Effect</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="loader-container">
<div id="image" class="image">
<img src="background.jpg" class="center" />
</div>
<div id="number" class="number center">0</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
body {
margin: 0;
padding: 0;
}
.loader-container {
height: 100vh;
width: 100vw;
position: relative;
}
.image {
position: relative;
height: 100vh;
}
.center {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
.image img {
width: min(95%, 900px);
}
.number {
font-size: 50px;
font-family: "Poppins", sans-serif;
font-weight: 600;
color: #ffffff;
-webkit-text-stroke: 2px #000000;
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
const imageElement = document.getElementById("image");
const numberElement = document.getElementById("number");
let count = 0;
const maxCount = 100;
const incrementLoader = () => {
//Check if count is less than maxCount
if (count < maxCount) {
count++;
//Update the text content of numberElement with the current count
numberElement.textContent = count + "%";
//Calculate the opacity as ratio of count to maxCount
const opacity = count / maxCount;
imageElement.style.opacity = opacity;
//Set a blue filter on imageElement with an amount that decreases as opacity increases
imageElement.style.filter = `blue($(10 - 10 * opacity)px)`;
} else if (count === maxCount) {
clearInterval(loaderInterval);
numberElement.textContent = "";
}
};
const loaderInterval = setInterval(incrementLoader, 60);
Conclusion:
In this tutorial, we created a simple loader animation using HTML, CSS, and JavaScript. You’ve learned how to structure a project, build the HTML and CSS components, and implement the JavaScript logic for the animation.
Feel free to customize this loader to match your project’s style and requirements. Loader animations are a useful addition to websites and web applications, providing a visually appealing way to indicate progress to your users. Happy coding!
it is important
thankyou