@@ -1,13 +1,16 @@
 // Preloader
-var preloader = document.getElementById('loading'); 
+var preloader = document.getElementById('loading');
+var preloader2 = document.getElementById('loading2');  
+    
+        function loading(){
+           setTimeout( myfunction,2000);
+       }
 
-function loading(){
-   setTimeout( myfunction,1500);
-}
-
-function myfunction(){
-preloader.style.display = 'none';
-}
+       
+       function myfunction(){
+        preloader.style.display = 'none';
+        preloader2.style.display = 'none';
+       }
 
 
 $(document).ready(function () {
 
@@ -15,63 +15,17 @@ body {
 }
 
 /* Preloader */
-.preloader {
-  background: #111;;
-  width: 100%;
-  height: 100%;
-  line-height: 50px;
-  text-align: center;
+#loading{
   position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-family: helvetica, arial, sans-serif;
-  font-weight: 900;
-  letter-spacing: 0.2em;
-  z-index: 9999999;
-}
-.preloader span {
-  position: absolute;
-  width: 250px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: #fff;
-  text-transform: uppercase;
-}
-.preloader span::before,
-.preloader span::after {
-  content: "";
-  display: block;
-  width: 15px;
-  height: 15px;
-  background: #e47a17;
-  position: absolute;
-  animation: load 1s infinite alternate ease-in-out;
-}
-.preloader span::before {
-  top: 0;
-}
-.preloader span::after {
-  bottom: 0;
-}
-@keyframes load {
-  0% {
-    left: 0;
-    height: 30px;
-    width: 15px;
-  }
-  50% {
-    height: 8px;
-    width: 40px;
-  }
-  100% {
-    left: 235px;
-    height: 30px;
-    width: 15px;
-  }
+  width: 100%;
+  height: 100vh;
+  background: #1f1e1e url('./assets/js-preloader.gif');
+  background-repeat: no-repeat;
+  background-position: center;
+  z-index: 99999;
 }
 
+
 /* Dark Mode */
 body.dark-mode {
   background-color: #111;
 
@@ -14,12 +14,14 @@
   <title>30 Days of JavaScript</title>
 </head>
 
-<body id="body" class="dark-mode"onload="loading()">
+<body id="body" class="dark-mode" onload="loading()">
 
-  <!--Preloader-->
-  <div class="preloader" id="loading" ><span>Loading...</span></div>
-  
-  <!-- Heading -->
+  <!--Pre Loader-->
+  <div id="loading">
+     
+  </div>
+
+  <!-- Heading --> 
   <h1>30 Days of JavaScript</h1>
   <input id="searchbar" onkeyup="search_project()" type="text" name="search" placeholder='Search projects.....' />
   <!-- Dark Mode Button -->