Merge pull request #868 from SanjanaSogimatt/adding-loader

Adding a loader
camicroscope · Mar 29, 2024 · 12cce06 · 12cce06
2 parents 56978ba + a6a04c9
commit 12cce06
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 1 deletion.
diff --git a/apps/landing/landing.html b/apps/landing/landing.html
@@ -14,8 +14,15 @@
 
 </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 -->
 <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" style="position: sticky; margin-top: -4em;">
     <div class="container-fluid">
         <button class="navbar-toggler m-1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -98,6 +105,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/[email protected]/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
@@ -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;