Blurry Loading

Blurry Loading

It’s a blurry loading image. So when you see the GIF it starts with 0% and then goes to 100% and then the image comes into focus. We are doing the blur effect just on the image but you can also create a Website landing page, You can have other elements in the DOM.

Let’s see how.

You need to follow the basic steps. Create a directory in you root. Create an Html file, Write some Css and javaScript. Make sure to include the css and the javaScript file in you index.html file.

Below are the Html, Css and JavaScript codes.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <title>Blurry Loading</title>
  </head>
  <body>
    <div class="bg"></div>
    <div class="loading-text">0%</div>
    <script src="main.js"></script>
  </body>
</html>

Create a div with class “bg”. Second div with a class of “loading-text” (name does not matter).

Css

@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap");

* {
  box-sizing: border-box;
}

body {
  align-items: center;
  display: flex;
  font-family: "Dela Gothic One", cursive;
  margin: 0;
  overflow: hidden;
  justify-content: center;
}

.bg {
  background: url("images/bay_bridge_san_francisco_city_black_and_white-wallpaper-1440x900.jpg")
    no-repeat center center/cover;
  position: absolute;
  top: -30px;
  left: -30px;
  width: 100vw;
  width: calc(100vw + 60px);
  height: calc(100vh + 60px);
  height: 100vh;
  z-index: -1;
  filter: blur(60px);
}

.loading-text {
  font-size: 50px;
  color: white;
  text-align: center;
}

Get creative. Use your own font and style. Explore you skills.

JavaScript

const bg = document.querySelector(".bg");
const loadText = document.querySelector(".loading-text");

let load = 0;

let int = setInterval(blurring, 30);

function blurring() {
  load++;

  if (load > 99) {
    clearInterval(int);
  }

  loadText.innerText = `${load}%`;
  loadText.style.opacity = scale(load, 0, 100, 1, 0);
  bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`;
}

const scale = (num, in_min, in_max, out_min, out_max) => {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
};

For more details on the above function click here.

If you find it informative like and share.

Checkout my GitHub for more such projects.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: