diff --git a/my code/05-blurry-loading/index.html b/my code/05-blurry-loading/index.html
new file mode 100644
index 0000000..e6b2e2f
--- /dev/null
+++ b/my code/05-blurry-loading/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+ 05 blurry loading
+
+
+
+
+
+
+ 0%
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/my code/05-blurry-loading/script.js b/my code/05-blurry-loading/script.js
new file mode 100644
index 0000000..10d6b70
--- /dev/null
+++ b/my code/05-blurry-loading/script.js
@@ -0,0 +1,14 @@
+let percent = 0;
+const span = document.getElementById("percent");
+const bg = document.getElementById("blurry-bg");
+
+const loading = setInterval(() => {
+ span.innerHTML = percent.toString() + "%";
+ bg.style.backdropFilter = "blur(" + ((100 - percent) / 5).toString() + "px)";
+ span.style.opacity = ((100 - percent) / 100).toString();
+ percent++;
+
+ if (percent > 100) {
+ clearInterval(loading);
+ }
+}, 20);
diff --git a/my code/05-blurry-loading/style.css b/my code/05-blurry-loading/style.css
new file mode 100644
index 0000000..26bd8e8
--- /dev/null
+++ b/my code/05-blurry-loading/style.css
@@ -0,0 +1,33 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ overflow: hidden;
+}
+
+main {
+ background: url("https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80")
+ center / cover;
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.blurry-bg {
+ width: 100vw;
+ height: 100vh;
+ backdrop-filter: blur(20px);
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.percent {
+ color: #fff;
+ z-index: 2;
+ font-size: 40px;
+}