Blurry Loading Mini project

abdulbariks · abdulbariks · commit 050f6fa09357 · 2025-01-04T01:25:03.000+06:00
diff --git a/103-Blurry Loading/img/one.jpg b/103-Blurry Loading/img/one.jpg
diff --git a/103-Blurry Loading/index.html b/103-Blurry Loading/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Blurry Loading</title>
+</head>
+<body>
+    <section class="bg"></section>
+    <div class="loading-text">0%</div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/103-Blurry Loading/script.js b/103-Blurry Loading/script.js
@@ -0,0 +1,24 @@
+let loadingText = document.querySelector('.loading-text');
+let bg = document.querySelector('.bg');
+
+
+let load = 0;
+let int = setInterval(doIt, 50)
+
+function doIt() {
+    load++;
+    loadingText.innerHTML = `${load}%`;
+
+    if (load === 100) {
+        clearInterval(int)
+    }
+    loadingText.style.opacity = scale(load, 0, 100, 1, 0)
+    bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
+}
+
+let scale = (num, in_min, in_max, out_min, out_max) =>{
+
+    return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
+}
+
+
diff --git a/103-Blurry Loading/style.css b/103-Blurry Loading/style.css
@@ -0,0 +1,27 @@
+@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
+
+
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    font-family: Ubuntu;
+    margin: 0;
+    overflow: hidden;
+}
+
+.bg{
+    background: url(img/one.jpg) no-repeat center center/cover;
+    width: calc(100vw + 60px);
+    height: calc(100vw + 60PX);
+    position: absolute;
+    top: -30px;
+    left: -30px;
+    z-index: -1;
+}
+
+.loading-text{
+    font-size: 70px;
+    color: white;
+}
