Merge pull request #571 from MastanSayyad/main

Add "Preloader" to All Pages (excluding Homepage)
sk66641 · Aug 5, 2024 · 012f51e · 012f51e
2 parents 71cff82 + ea09c59
commit 012f51e
Show file tree

Hide file tree

Showing 10 changed files with 354 additions and 7 deletions.
diff --git a/404.html b/404.html
@@ -12,9 +12,43 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <title>Error - 404</title>
     <script src="./js/404.js" defer></script>
+    <link rel="stylesheet" href="/css/preloader.css">
 </head>
 
 <body>
+
+    <!-- Preloader starts -->
+    <div id="preloader">
+        <div class="spinner">
+            <div class="spinner-inner"></div>
+            <div id="loading-percentage">0%</div>
+        </div>
+    </div>
+    <script>
+        window.addEventListener('load', () => {
+    const preloader = document.getElementById('preloader');
+    const content = document.getElementById('content');
+    const loadingPercentage = document.getElementById('loading-percentage');
+
+    let percentage = 0;
+
+    const interval = setInterval(() => {
+        percentage += 10; 
+        loadingPercentage.textContent = `${percentage}%`;
+        if (percentage >= 100) {
+            clearInterval(interval);
+            setTimeout(() => {
+                preloader.style.display = 'none';
+                content.style.display = 'block';
+                document.body.style.overflow = 'auto'; 
+            }, 300); 
+        }
+    }, 100); 
+});
+
+    </script>
+<!-- Preloader Ends -->
+<div id="content"> 
     <div class="errorpage"></div>
     <div class="stars"></div>
     <div class="container">
@@ -32,6 +66,7 @@
                 <span class="light-mode-icon"><img src="sun.svg" style = "display: block;"></span>
                 <span class="dark-mode-icon"><img src="moon.svg"style = "display: block;"></span>
             </div>
+</div>
 </body>
 
 </html>
diff --git a/css/preloader.css b/css/preloader.css
@@ -0,0 +1,58 @@
+#preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.spinner {
+    position: relative;
+    width: 130px; /* Size of the spinner */
+    height: 130px; /* Size of the spinner */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.spinner-inner {
+    width: 100px; /* Size of the spinner */
+    height: 100px; /* Size of the spinner */
+    border-radius: 50%; /* Makes the spinner circular */
+    border: 10px solid transparent; /* Base border to create space */
+    border-top: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-left: 10px solid transparent; /* Gradient applied here */
+    border-image: linear-gradient(45deg, #ff2d15, #be18ff, #0d3dff); /* Gradient border */
+    border-image-slice: 1;
+    animation: spin 1s linear infinite;
+}
+
+#loading-percentage {
+    position: absolute;
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    background: linear-gradient(45deg, #be18ff, #ffffff); /* Gradient text color */
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent; /* Makes text color gradient */
+    color: transparent; /* Fallback for non-webkit browsers */
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+#content {
+    display: none; /* Hide content until preloader is done */
+}
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
   <meta name="description" content="Experience the vibrant Random Disco Light Simulator! Enjoy dynamic, colorful light patterns and immerse yourself in a fun, party-like atmosphere.">
   <meta name="keywords" content="disco lights, light simulator, random disco lights, colorful lights, dynamic light patterns, party lights, interactive light effects, fun lighting, vibrant light show, random light patterns">
   <title>Random Disco Light Simulator</title>
-  <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
+  <link rel="icon" type="image/x-icon" href="../assets/images/favicon.ico">
   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="css/backToTopButton.css">
   <link rel="stylesheet" href="./css/style.css">

diff --git a/pages/about.html b/pages/about.html
@@ -10,6 +10,7 @@
     <link rel="icon" type="image/x-icon" href="../assets/images/favicon.ico">
     <link rel="stylesheet" href="../css/style.css">
     <link rel="stylesheet" href="../css/about.css">
+    <link rel="stylesheet" href="../css/preloader.css">
     <link rel="stylesheet" href="../css/backToTopButton.css">
     <link rel="stylesheet" href="../css/backtohome.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
@@ -66,6 +67,40 @@
   </head>
 
   <body>
+
+
+ <!-- Preloader starts -->
+       <div id="preloader">
+        <div class="spinner">
+            <div class="spinner-inner"></div>
+            <div id="loading-percentage">0%</div>
+        </div>
+    </div>
+    <script>
+        window.addEventListener('load', () => {
+    const preloader = document.getElementById('preloader');
+    const content = document.getElementById('content');
+    const loadingPercentage = document.getElementById('loading-percentage');
+
+    let percentage = 0;
+
+    const interval = setInterval(() => {
+        percentage += 10; 
+        loadingPercentage.textContent = `${percentage}%`;
+        if (percentage >= 100) {
+            clearInterval(interval);
+            setTimeout(() => {
+                preloader.style.display = 'none';
+                content.style.display = 'block';
+                document.body.style.overflow = 'auto'; 
+            }, 300); 
+        }
+    }, 100); 
+});
+
+    </script>
+<!-- Preloader Ends -->
+
     <div class="circle-container">
       <div class="circle"></div>
       <div class="circle"></div>
@@ -138,6 +173,7 @@
     </script>
     <script src="../js/theme.js"></script>
 
+<div id="content"> 
     <span class="slider" style="width: 40px; height: 20px; display: none;"></span> 
 
     <div id="sun-moon-mode-toggler" class="toggle-container" >
@@ -271,5 +307,6 @@ <h2>Account Not Available</h2>
             <p>Thank you for your continued support!</p>
         </div>
     </div>    
+</div>
 </body>
 </html>
diff --git a/pages/contributors.html b/pages/contributors.html
@@ -9,6 +9,7 @@
     <link rel="icon" type="image/x-icon" href="../assets/images/favicon.ico">
     <link rel="stylesheet" href="../css/style.css">
     <link rel="stylesheet" href="../css/backtohome.css">
+    <link rel="stylesheet" href="../css/preloader.css">
     <link rel="stylesheet" href="../css/about.css">
     <link rel="stylesheet" href="../css/contributors.css">
     <link rel="stylesheet" href="../css/backToTopButton.css">
@@ -106,6 +107,39 @@
       </head>
 
       <body>
+
+<!-- Preloader starts -->
+   <div id="preloader">
+    <div class="spinner">
+        <div class="spinner-inner"></div>
+        <div id="loading-percentage">0%</div>
+    </div>
+</div>
+<script>
+    window.addEventListener('load', () => {
+const preloader = document.getElementById('preloader');
+const content = document.getElementById('content');
+const loadingPercentage = document.getElementById('loading-percentage');
+
+let percentage = 0;
+
+const interval = setInterval(() => {
+    percentage += 10; 
+    loadingPercentage.textContent = `${percentage}%`;
+    if (percentage >= 100) {
+        clearInterval(interval);
+        setTimeout(() => {
+            preloader.style.display = 'none';
+            content.style.display = 'block';
+            document.body.style.overflow = 'auto'; 
+        }, 300); 
+    }
+}, 100); 
+});
+
+</script>
+<!-- Preloader Ends -->
+
         <div class="circle-container">
           <div class="circle"></div>
           <div class="circle"></div>
@@ -178,6 +212,7 @@
         </script>
         <script src="../js/theme.js"></script>
 
+<div id="content"> 
         <span class="slider" style="width: 40px; height: 20px; display: none;"></span> 
 
         <div id="sun-moon-mode-toggler" class="toggle-container" >
@@ -316,5 +351,6 @@ <h2>Account Not Available</h2>
             <p>Thank you for your continued support! </p>
         </div>
     </div>
+</div>
 </body>
 </html>
diff --git a/pages/faq.html b/pages/faq.html
@@ -10,6 +10,7 @@
     <link rel="icon" type="image/x-icon" href="../assets/images/favicon.ico">
     <link rel="stylesheet" href="../css/style.css">
     <link rel="stylesheet" href="../css/faq.css">
+    <link rel="stylesheet" href="../css/preloader.css">
     <link rel="stylesheet" href="../css/backtohome.css">
     <link rel="stylesheet" href="../css/backToTopButton.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
@@ -98,6 +99,39 @@
       </head>
 
       <body>
+
+<!-- Preloader starts -->
+   <div id="preloader">
+    <div class="spinner">
+        <div class="spinner-inner"></div>
+        <div id="loading-percentage">0%</div>
+    </div>
+</div>
+<script>
+    window.addEventListener('load', () => {
+const preloader = document.getElementById('preloader');
+const content = document.getElementById('content');
+const loadingPercentage = document.getElementById('loading-percentage');
+
+let percentage = 0;
+
+const interval = setInterval(() => {
+    percentage += 10; 
+    loadingPercentage.textContent = `${percentage}%`;
+    if (percentage >= 100) {
+        clearInterval(interval);
+        setTimeout(() => {
+            preloader.style.display = 'none';
+            content.style.display = 'block';
+            document.body.style.overflow = 'auto'; 
+        }, 300); 
+    }
+}, 100); 
+});
+
+</script>
+<!-- Preloader Ends -->
+
         <div class="circle-container">
           <div class="circle"></div>
           <div class="circle"></div>
@@ -169,7 +203,8 @@
           });
         </script>
         <script src="../js/theme.js"></script>
-
+
+<div id="content"> 
         <span class="slider" style="width: 40px; height: 20px; display: none;"></span> 
 
         <div id="sun-moon-mode-toggler" class="toggle-container" >
@@ -291,6 +326,7 @@ <h2>Account Not Available</h2>
             <p>Thank you for your continued support!</p>
         </div>
     </div>
+</div>
 
 </body>
 

diff --git a/pages/features.html b/pages/features.html
@@ -10,6 +10,7 @@
     <link rel="icon" type="image/x-icon" href="../assets/images/favicon.ico">
     <link rel="stylesheet" href="../css/style.css">
     <link rel="stylesheet" href="../css/backtohome.css">
+    <link rel="stylesheet" href="../css/preloader.css">
     <link rel="stylesheet" href="../css/features.css">
     <link rel="stylesheet" href="../css/backToTopButton.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
@@ -61,9 +62,41 @@
         </style>
 
 
-      </head>
-
-      <body>
+</head>
+<body>
+
+<!-- Preloader starts -->
+    <div id="preloader">
+        <div class="spinner">
+            <div class="spinner-inner"></div>
+            <div id="loading-percentage">0%</div>
+        </div>
+    </div>
+    <script>
+        window.addEventListener('load', () => {
+    const preloader = document.getElementById('preloader');
+    const content = document.getElementById('content');
+    const loadingPercentage = document.getElementById('loading-percentage');
+
+    let percentage = 0;
+
+    const interval = setInterval(() => {
+        percentage += 10; 
+        loadingPercentage.textContent = `${percentage}%`;
+        if (percentage >= 100) {
+            clearInterval(interval);
+            setTimeout(() => {
+                preloader.style.display = 'none';
+                content.style.display = 'block';
+                document.body.style.overflow = 'auto'; 
+            }, 300); 
+        }
+    }, 100); 
+});
+
+    </script>
+<!-- Preloader Ends -->
+
         <div class="circle-container">
           <div class="circle"></div>
           <div class="circle"></div>
@@ -136,6 +169,7 @@
         </script>
     <script src="../js/theme.js"></script>
 
+<div id="content"> 
     <span class="slider" style="width: 40px; height: 20px; display: none;"></span> 
 
     <div id="sun-moon-mode-toggler" class="toggle-container" >
@@ -343,6 +377,7 @@ <h2>Account Not Available</h2>
             <p>Thank you for your continued support! </p>
         </div>
     </div>
+</div>
 </body>
 
 </html>