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