Merge pull request #116 from marizvi/master

pre loader added
manankohlii · Jun 23, 2021 · 610d4f8 · 610d4f8
2 parents 8c5329a + 094d3ee
commit 610d4f8
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -11,11 +11,14 @@
     <link rel="stylesheet" href="main.css"/>
 
 </head>
-<body>
+<body onload="removeload()">
     <div id="particles-js"></div>
     <script type="text/javascript" src="js/particles.js"></script>
     <script type="text/javascript" src="js/app.js"></script>
-
+    <div id="preloading">
+    </div>
+    <main class = "back">
+
 
 <!-- Navbar -->
 <nav class="navbar navbar-expand-lg scrolling-navbar">
@@ -134,5 +137,6 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
     <script src="js/main.js"></script>
+</main>
 </body>
 </html>
diff --git a/js/main.js b/js/main.js
@@ -69,3 +69,8 @@ const stopVideo = () => {
 
   document.querySelector('.modal__closebar')
     .addEventListener('click', toggleModal);
+
+    removeload=()=>{
+      var preloader=document.getElementById('preloading')
+      preloader.style.display="none";
+    }
diff --git a/ll3.gif b/ll3.gif
diff --git a/main.css b/main.css
@@ -8,7 +8,28 @@ body {
   font-family: "verdana", sans-serif;
   background: url("images/bg1.png") no-repeat center center/cover fixed;
 }
-
+.back{
+  padding: 0;
+  animation: anim 2s;
+  animation-timing-function: ease-in-out;
+}
+@keyframes anim {
+  0%{
+    opacity: 0%;
+  }
+  100%{
+    opacity: 100%;
+  }
+}
+#preloading{
+  position: fixed;
+  height: 100vh;
+  width: 100%;
+  background: black url('ll3.gif') no-repeat center;
+  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
+  background-size: 45%;
+  z-index: 9999;
+}
 .app-wrap {
   min-height: 100vh;
   background-image: linear-gradient(