diff --git a/apps/landing/landing.html b/apps/landing/landing.html
index e442429ca..bbb52c33e 100644
--- a/apps/landing/landing.html
+++ b/apps/landing/landing.html
@@ -12,7 +12,13 @@
 
 </head>
 <body>
-
+<!-- loading animation -->
+<div class="main-site">
+    <!-- adding css -->
+    <div class="main-content" role="main" id="mainContent">
+        <div class="loader loader-black loader-5"></div>
+    </div>
+</div>
 
 
 <!-- Header -->
@@ -135,6 +141,14 @@ <h3>Documentation</h3>
 
 
 <!-- Scripts -->
+<!-- loading animation script -->
+<script>
+    var loader= document.querySelector('.loader');
+    window.addEventListener('load', function() {
+        loader.style.display = 'none';
+    });
+</script>
+
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
 <script src="./jquery.min.js"></script>
 
diff --git a/apps/landing/main.css b/apps/landing/main.css
index 0fe5b3598..cd6a1973c 100644
--- a/apps/landing/main.css
+++ b/apps/landing/main.css
@@ -9,6 +9,45 @@
 
 /* Reset */
 
+/* addind loader animation */
+.loader {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.loader,
+.loader:before,
+.loader:after {
+    animation: 1s infinite ease-in-out;
+}
+.loader:before,
+.loader:after {
+    width: 100%; 
+    height: 100%;
+    border-radius: 50%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.loader-black { background-color: #9b3c8b; }
+
+/* Loader 5 */
+
+.loader-5 {
+    animation: loader5 1s infinite linear;
+}
+
+    @keyframes loader5 {
+        0% {   transform: rotate(0deg); border-radius: 50%; }
+        50% {  transform: rotate(90deg); border-radius: 0%; }
+        100% { transform: rotate(180deg); border-radius: 50%; }
+    }
+
 
 	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 		margin: 0;
