diff --git a/50Days/day5/index.html b/50Days/day5/index.html
new file mode 100644
index 0000000..f99af97
--- /dev/null
+++ b/50Days/day5/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+
+
+ Day5: Blurry Loading
+
+
+
+
+ 0%
+
+
+
+
diff --git a/50Days/day5/script.js b/50Days/day5/script.js
new file mode 100644
index 0000000..54ccd00
--- /dev/null
+++ b/50Days/day5/script.js
@@ -0,0 +1,18 @@
+const loadText = document.querySelector('.loading-text');
+const bg = document.querySelector('.bg');
+
+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 load = 0;
+let int = setInterval(blurring, 15);
+
+function blurring() {
+ load++;
+ 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)`;
+}
diff --git a/50Days/day5/style.css b/50Days/day5/style.css
new file mode 100644
index 0000000..72d4552
--- /dev/null
+++ b/50Days/day5/style.css
@@ -0,0 +1,31 @@
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu');
+
+* {
+ 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('https://picsum.photos/1980') no-repeat center center/cover;
+ position: absolute;
+ top: -30px;
+ left: -30px;
+ width: calc(100vw + 60px);
+ height: calc(100vh + 60px);
+ z-index: -1;
+ filter: blur(70px);
+}
+
+.loading-text {
+ font-size: 50px;
+ color: white;
+}