Solved issue #47

AdityaTeltia · AdityaTeltia · commit 02da716d4168 · 2020-12-03T17:51:40.000+05:30
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -2,6 +2,17 @@ body {
   background: #fff;
   color: #444;
   font-family: "Open Sans", sans-serif;
+  overflow: hidden;
+}
+#loading{
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  z-index: 100;
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
 }
 
 a {
@@ -147,15 +158,14 @@ h6 {
 #header {
   height: 110px;
   transition: all 0.5s;
-  z-index: 997;
+  z-index: 1;
   transition: all 0.5s;
   padding: 20px 0;
   position: fixed;
   left: 0;
   top: 0;
   right: 0;
   transition: all 0.5s;
-  z-index: 997;
 }
 
 #header.header-scrolled,
diff --git a/assets/img/preloader Gif.gif b/assets/img/preloader Gif.gif
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -5,6 +5,13 @@
  * License: https://bootstrapmade.com/license/
  */
 
+jQuery(document).ready(function() {
+  jQuery('#loading').fadeOut(2000);
+  setTimeout(() => {
+    document.querySelector('body').style.overflow = "visible";
+  }, 1900);
+});
+
 (function ($) {
   "use strict";
 
diff --git a/index.html b/index.html
@@ -50,6 +50,7 @@
 </head>
 
 <body>
+  <div id = "loading"><img src="./assets/img/preloader Gif.gif" alt="LOADING..."></div>
 
   <!-- ======= Header ======= -->
   <header id="header">
