diff --git a/index.html b/index.html
index 22a4a65..37e0db0 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,10 @@
 <!DOCTYPE html>
+
 <html lang="en">
   
+
   <!-- Welcome to HACKTOBERFEST 2022 -->
-  
+
   <!-- DONT WAIT; Start Contributing. Small contribution also counts and will be considered -->
 
 <head>
@@ -49,7 +51,9 @@
         
 </head>
 
-
+<body onload="myFunction()" style="margin:0;">
+  <div id="loader"></div>
+    <div style="display:none;" id="myDiv" class="animate-bottom">
 <nav class="navbar navbar-expand-lg navbar-dark fixed-top" aria-label="Main navigation"
   style="background-color:#076ae1;max-height: 7vh;padding: 0px;">
   <div class="container align-items-center" style="margin-bottom: 0px; padding-bottom:0px">
@@ -301,6 +305,8 @@ <h5>Subscribe to our newsletter</h5>
       </div>
   </footer>
 
+</div>
+</div>
 
 <script src="./vendor/js/jquery-3.6.0.min.js"></script>
 <script src="./vendor/js/bootstrap.bundle.min.js"></script>
@@ -310,6 +316,18 @@ <h5>Subscribe to our newsletter</h5>
 <script src="./src/js/helper.js"></script>
 <script src="./src/js/script.js"></script>
 <script src="./src/js/products.js"></script>
+<script>
+var myVar;
+
+function myFunction() {
+myVar = setTimeout(showPage, 3000);
+}
+
+function showPage() {
+document.getElementById("loader").style.display = "none";
+document.getElementById("myDiv").style.display = "block";
+}
+</script>
 </body>
 
 </html>
diff --git a/src/css/style.css b/src/css/style.css
index d4029e7..5e0ec68 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -11,6 +11,57 @@ v996-008   premium
     src: url("../../res/fonts/MagilioRegular-8Mxvg.otf");
   } */
 
+  /* Center the loader */
+    #loader {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ z-index: 1;
+ width: 120px;
+ height: 120px;
+ margin: -76px 0 0 -76px;
+ border: 16px solid #f3f3f3;
+ border-radius: 50%;
+ border-top: 16px solid #3498db;
+ -webkit-animation: spin 2s linear infinite;
+ animation: spin 2s linear infinite;
+}
+
+@-webkit-keyframes spin {
+ 0% { -webkit-transform: rotate(0deg); }
+ 100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+
+    /* Add animation to "page content" */
+    .animate-bottom {
+      position: relative;
+      -webkit-animation-name: animatebottom;
+      -webkit-animation-duration: 1s;
+      animation-name: animatebottom;
+      animation-duration: 1s
+    }
+
+    @-webkit-keyframes animatebottom {
+      from { bottom:-100px; opacity:0 }
+      to { bottom:0px; opacity:1 }
+    }
+
+    @keyframes animatebottom {
+      from{ bottom:-100px; opacity:0 }
+      to{ bottom:0; opacity:1 }
+    }
+
+    #myDiv {
+      display: none;
+      text-align: center;
+    }
+
 body {
   padding-top: 35px;
   /* background-image: url("https://images.pexels.com/photos/4202924/pexels-photo-4202924.jpeg?cs=srgb&dl=pexels-karolina-grabowska-4202924.jpg&fm=jpg"); */
@@ -79,6 +130,7 @@ body {
   background: #076ae1;
 }
 
+
 /* footer */
 .Flex {
   display: flex;
@@ -122,3 +174,4 @@ footer ul li {
     display: none;
   }
 }
+
