Merge pull request #21 from aviiciii/dev

Preloader added
aviiciii · Jun 2, 2023 · ee6e08e · ee6e08e
2 parents 413a35b + 225d03b
commit ee6e08e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 2 deletions.
diff --git a/assets/script.js b/assets/script.js
@@ -193,4 +193,12 @@ function light(){
     // save preference
     localStorage.setItem('dark-mode', 'false');
 
-}
+}
+
+
+// preloader
+window.addEventListener('load', function() {
+    document.body.style.opacity = '1';
+    document.body.style.visibility = 'visible';
+    document.querySelector('.preloader').style.display = 'none';
+});
diff --git a/assets/styles.css b/assets/styles.css
@@ -317,7 +317,6 @@ body {
 	-khtml-user-drag: none;
 	-moz-user-drag: none;
 	-o-user-drag: none;
-	user-drag: none;
 
 }
 
@@ -380,3 +379,29 @@ body {
 	}
 }
 
+
+/* preloader */
+
+body {
+	opacity: 0;
+	visibility: hidden;
+	transition: opacity 0.8s ease-in;
+}
+
+.preloader {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100vh;
+	background-color: #333;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 9999;
+}
+
+.preloader-text {
+	color: #fff;
+	font-size: 24px;
+}
diff --git a/index.html b/index.html
@@ -23,6 +23,10 @@
     </head>
 
 	<body>
+        <!-- preloader -->
+        <div class="preloader">
+            <span class="preloader-text">Loading...</span>
+        </div>
 
         <!-- dark mode toggle -->
         <div class="dark-mode-toggle">