now shows loading screen while site content loads

nitinsooni · Sep 26, 2024 · 3e3d0c0 · 3e3d0c0
1 parent 6181909
commit 3e3d0c0
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 8 deletions.
diff --git a/css/media.css b/css/media.css
@@ -108,7 +108,7 @@
     }
 
     #home .contact-box {
-        padding-top: 9rem;
+        padding-top: 11rem;
         padding-bottom: 14rem;
     }
 
@@ -150,7 +150,7 @@
     }
 
     #portfolio .title {
-        padding-top: 2rem;
+        padding-top: 1rem;
     }
 
     #portfolio .title h2 {
@@ -168,6 +168,7 @@
     #portfolio .table .table-r i {
         font-size: 2.7rem;
         padding-bottom: 1.2rem;
+        padding-left: .3rem;
     }
 
     #portfolio .table .table-r h3 {
@@ -203,6 +204,7 @@
     #contact .table .table-l i {
         font-size: 2.5rem;
         padding-bottom: 1.2rem;
+        padding-left: .3rem;
     }
 
     #contact .table .table-l h3 {
@@ -228,6 +230,13 @@
 }
 
 @media only screen and (max-width: 540px) {
+    .loading-screen .loader {
+        width: 50px;
+        padding: 7px;
+    }
+
+    /*----------------------------------------------------*/
+
     #portfolio .table .table-l .nav-buttons {
         column-gap: 2.5rem;
         margin-bottom: 1.5rem;

diff --git a/css/style.css b/css/style.css
@@ -114,8 +114,44 @@ button {
 
 /*----------------------------------------------------*/
 
-nav {
+.loading-screen {
+    width: 100%;
+    height: 100vh;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
     z-index: 999;
+    opacity: 1;
+    transition: opacity .5s ease;
+    backdrop-filter: blur(48px);
+}
+
+.loading-screen .loader {
+    width: 70px;
+    padding: 9px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: var(--gold);
+    --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
+    mask: var(--_m);
+    mask-composite: subtract;
+    animation: spin 1s infinite linear;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(1turn);
+    }
+}
+
+.loading-screen-hide {
+    opacity: 0;
+}
+
+nav {
+    z-index: 99;
     width: 100%;
     height: 4.5rem;
     padding: 0 5%;
@@ -255,7 +291,7 @@ nav .nav-r a {
     stroke-linejoin: round;
     stroke-dasharray: 632;
     stroke-dashoffset: 632;
-    animation: 1.5s ease .2s forwards draw;
+    animation: 1.5s ease .25s forwards draw;
 }
 
 @keyframes draw {
@@ -328,7 +364,7 @@ nav .nav-r a {
 }
 
 #home #scroll-to-top {
-    z-index: 999;
+    z-index: 99;
     display: none;
     position: fixed;
     bottom: 2rem;
@@ -516,6 +552,7 @@ nav .nav-r a {
 #portfolio .table .table-r i {
     font-size: 3rem;
     padding-bottom: 1.5rem;
+    padding-left: .5rem;
     background: -webkit-linear-gradient(0deg, #b18a52, #f1e8a4);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -610,6 +647,7 @@ nav .nav-r a {
 #contact .table .table-l i {
     font-size: 2.7rem;
     padding-bottom: 1.5rem;
+    padding-left: .5rem;
     background: -webkit-linear-gradient(0deg, #b18a52, #f1e8a4);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
@@ -661,7 +699,7 @@ nav .nav-r a {
 }
 
 #contact .table .table-r .container .card {
-    width: 25rem;
+    width: 24rem;
     height: 32rem;
     background: #1f1f1f;
     border: 1px solid rgba(255, 255, 255, .12);
@@ -674,7 +712,7 @@ nav .nav-r a {
     position: absolute;
     top: -1.4px;
     right: 0;
-    left: 112px;
+    left: 95px;
     bottom: 0;
     pointer-events: none;
 }

diff --git a/index.html b/index.html
@@ -17,6 +17,9 @@
     <link rel="stylesheet" href="/assets/fonts/fontawesome/css/brands.css"/>
 </head>
 <body>
+    <div class="loading-screen">
+        <div class="loader"></div>
+    </div>
     <nav>
         <div class="nav-l">
             <ul>
@@ -116,7 +119,7 @@ <h2>Portfolio</h2>
                                 <div class="card c">
                                     <img src="/assets/images/card-border.svg">
                                     <div class="content">
-                                        <p class="heading">N/A (Still studying)</p>
+                                        <p class="heading">N/A (Still Studying)</p>
                                     </div>
                                 </div>
                             </div>

diff --git a/js/script.js b/js/script.js
@@ -1,3 +1,14 @@
+// Disable loading screen when website fully loaded with fade-out animation
+const loadingScreen = document.querySelector('.loading-screen');
+
+window.addEventListener('load', function() {
+    loadingScreen.classList.add('loading-screen-hide');
+
+    setTimeout(function() {
+        loadingScreen.style.display = 'none';
+    }, 500);
+});
+
 // Navbar links gets in focus according to which section is in view
 window.addEventListener('scroll', function () {
     const sections = document.querySelectorAll('.section');