You are currently viewing 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 Loading Screen Animation. We use Html for creating the Structure and Add Css for the Blurry Effect finally we add JavaScript for this loading screen animation with a blurry effect.

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

HTML Code For loading Animation

<!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 loading Animation

@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 loading Animation

 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