diff --git a/BMI Calculator/index.html b/BMI Calculator/index.html
index 3de3e5f..66f5d8a 100644
--- a/BMI Calculator/index.html	
+++ b/BMI Calculator/index.html	
@@ -10,6 +10,7 @@
       integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
       crossorigin="anonymous"
     />
+    <title>BMI Calculator</title>
     <style>
       @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
 
@@ -90,10 +91,21 @@
         text-align: center;
         box-shadow: inset 28px 28px 74px #d6d6d6, inset -28px -28px 74px #ffffff;
       }
+      .preloader {
+        width: 100%;
+        height: 100vh;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        z-index: 100;
+      }
     </style>
-    <title>BMI Calculator</title>
   </head>
-  <body>
+  <body onload="loadFunc()">
+    <div class="preloader"><img src="../giphy.gif" alt="" /></div>
+
     <div class="container">
       <h2>BMI Calculator</h2>
       <form class="form">
@@ -152,6 +164,13 @@ <h2>BMI Calculator</h2>
           }
         }
       });
+
+      var preloader = document.querySelector(".preloader");
+      function loadFunc() {
+        setTimeout(function () {
+          preloader.style.display = "none";
+        }, 1650);
+      }
     </script>
   </body>
 </html>
diff --git a/HEX code color generator/index.html b/HEX code color generator/index.html
index 1e964b0..4dcaa40 100644
--- a/HEX code color generator/index.html	
+++ b/HEX code color generator/index.html	
@@ -34,9 +34,21 @@
         box-shadow: 0px 20px 30px rgba(75, 75, 75, 0.2);
         border-radius: 15px;
       }
+      .preloader {
+        width: 100%;
+        height: 100vh;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        z-index: 100;
+      }
     </style>
   </head>
-  <body>
+  <body onload="loadFunc()">
+    <div class="preloader"><img src="../giphy.gif" alt="" /></div>
+
     <div id="container">
       <input
         type="text"
@@ -61,6 +73,12 @@
       clr.addEventListener("input", function () {
         document.getElementById("container").style.background = clr.value;
       });
+      var preloader = document.querySelector(".preloader");
+      function loadFunc() {
+        setTimeout(function () {
+          preloader.style.display = "none";
+        }, 1650);
+      }
     </script>
   </body>
 </html>
diff --git a/alarm clock/index.html b/alarm clock/index.html
index c624730..90da30a 100644
--- a/alarm clock/index.html	
+++ b/alarm clock/index.html	
@@ -17,9 +17,24 @@
     />
 
     <title>Alarm Clock</title>
+
+    <style>
+      .preloader {
+        width: 100%;
+        height: 100vh;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        z-index: 100;
+      }
+    </style>
   </head>
 
-  <body onload="clock(); setInterval('clock()', 1000);">
+  <body onload="clock(); setInterval('clock()', 1000); loadFunc();">
+    <div class="preloader"><img src="../giphy.gif" alt="" /></div>
+
     <div
       class="alert alert-success alert-dismissible fade"
       role="alert"
diff --git a/alarm clock/script.js b/alarm clock/script.js
index 2a3ba7f..a30dd07 100644
--- a/alarm clock/script.js	
+++ b/alarm clock/script.js	
@@ -107,3 +107,15 @@ const btn = document.getElementById('btn').addEventListener('click', (e) => {
     second.value = '';
 });
 
+////////////////////////////////////////////////////////////////////////////////////////
+
+//PRELOADER
+
+      var preloader = document.querySelector(".preloader");
+      function loadFunc() {
+        setTimeout(function () {
+          preloader.style.display = "none";
+        }, 1650);
+}
+      
+////////////////////////////////////////////////////////////////////////////////////////
\ No newline at end of file
diff --git a/calculator/index.html b/calculator/index.html
index eac461d..b78f299 100644
--- a/calculator/index.html
+++ b/calculator/index.html
@@ -13,6 +13,13 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     ></script>
+    <title>Calculator</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
+      integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
+      crossorigin="anonymous"
+    />
     <!-- for styling -->
     <style>
       body {
@@ -47,18 +54,21 @@
         border-radius: 5px;
         border: 2px solid black;
       }
+      .preloader {
+        width: 100%;
+        height: 100vh;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        z-index: 100;
+      }
     </style>
-    <title>Calculator</title>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
-      integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
-      crossorigin="anonymous"
-    />
   </head>
-  <!-- create table -->
+  <body onload="loadFunc()">
+    <div class="preloader"><img src="../giphy.gif" alt="" /></div>
 
-  <body>
     <div class="container">
       <h2 class="text-center display-4 my-4"><b>Calculator</b></h2>
       <table id="calcu">
@@ -260,6 +270,12 @@ <h2 class="text-center display-4 my-4"><b>Calculator</b></h2>
       function clr() {
         document.getElementById("result").value = "";
       }
+      var preloader = document.querySelector(".preloader");
+      function loadFunc() {
+        setTimeout(function () {
+          preloader.style.display = "none";
+        }, 1650);
+      }
     </script>
   </body>
 </html>
diff --git a/giphy.gif b/giphy.gif
new file mode 100644
index 0000000..6d22fa0
Binary files /dev/null and b/giphy.gif differ
diff --git a/index.html b/index.html
index 7ed7c89..5c15cc5 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,22 @@
       integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
       crossorigin="anonymous"
     />
+    <style>
+      .preloader {
+        width: 100%;
+        height: 100vh;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        z-index: 100;
+      }
+    </style>
   </head>
-  <body>
+  <body onload="loadFunc()">
+    <div class="preloader"><img src="giphy.gif" alt="" /></div>
+
     <h1 class="text-center my-4">Hacktober Fest 2022</h1>
     <section class="container d-flex justify-content-center">
       <table class="table table-responsive">
@@ -51,5 +65,13 @@ <h1 class="text-center my-4">Hacktober Fest 2022</h1>
       integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
       crossorigin="anonymous"
     ></script>
+    <script>
+      var preloader = document.querySelector(".preloader");
+      function loadFunc() {
+        setTimeout(function () {
+          preloader.style.display = "none";
+        }, 1650);
+      }
+    </script>
   </body>
 </html>
