HomeCSSImage Loading Blur Effect

Image Loading Blur Effect

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:

  1. How to structure a project folder.
  2. Creating the HTML structure for a loader animation.
  3. Styling the loader animation with CSS.
  4. 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!

RELATED ARTICLES

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

4 × five =

Most Popular