Blurry Loading Screen Animation using HTML,CSS & JavaScript

Blurry Loading Screen Animation using HTML,CSS & JavaScript

Blurry Loading Screen Animation using HTML,CSS & JavaScript

 

Blurry Loading Screen Animation using HTML,CSS & JavaScript
Blurry Loading Screen Animation using HTML,CSS & JavaScript

 

Welcome to Code With Random blog. In this blog, We learn how to create a Blur Loading Screen Animation. We use Html for creating the Structure and Add Css for the Blurry Effect on the image and add JavaScript for this loading screen animation with a blurry effect.

we create a Section in html for the image and a div for showing the percentage then we use image form css remember not to add an image in html.

I hope you enjoy our blog so let’s start with a basic HTML structure for a blurry loading screen animation.

HTML Code For blur loading effect

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> blurry loading screen animation </title>
</head>
<body>
<section class="bg"></section>
<div class="loading-text">0%</div>
</body>
</html>

There is all Html Code for the Blurry Loading Screen Animation. Now, you can see output without Css and JavaScript. then we write Css gives a blurry effect and Add JavaScript for the blurry loading screen animation Effect.

5+ HTML CSS Projects With Source Code

Only Html Code Output

Blurry Loading Screen Animation using HTML,CSS & JavaScript
Blurry Loading Screen Animation using HTML,CSS & JavaScript

CSS Code For blur loading effect

@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Ubuntu", sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.bg {
background: url("./car2.jpg")
no-repeat center center / cover;
position: absolute;
top: -30px;
left: -30px;
width: calc(100vw + 60px);
height: calc(100vh + 60px);
z-index: -1;
filter: blur(0px);
}
.loading-text {
font-size: 50px;
color: #a3b1c3;
}

Now we have completed our Css Code Section. Here is our updated output HTML + CSS.

50+ Html ,Css & Javascript Projects With Source Code

Html and Css Update Output

Blurry Loading Screen Animation using HTML,CSS & JavaScript
Blurry Loading Screen Animation using HTML,CSS & JavaScript

JavaScript Code For blur loading effect

 const loadText = document.querySelector(".loading-text");  
 const bg = document.querySelector(".bg");  
 let load = 0;  
 const 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;
};
let int = setInterval(blurring, 30);

Final Output Of Blurry Loading Screen Animation Effect Html,Css and JavaScript

Now we have completed our Blurry Loading Screen Animation. Here is our updated output with Html, Css, and JavaScript. Hope you like the Blurry Loading Screen Animation. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Thank you!

In this post, we learn how to create a Blurry Loading Screen Animation Using Html, Css, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn quickly.

Written by – Code With Random/Anki



Leave a Reply