Preload addition PR( #158 ) from Dharmi-dev/main

preloader addn : (#75 )
4darsh-Dev · Jul 23, 2024 · d7b8ece · d7b8ece
2 parents f829a80 + e1ff015
commit d7b8ece
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 0 deletions.
diff --git a/django-web-app/static/css/style.css b/django-web-app/static/css/style.css
@@ -34,6 +34,126 @@
   --font-ex-large: 3.5rem;
 }
 
+/* -----preloader-starts-------- */
+
+@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+
+
+.loader{
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.preloader4{
+  background: linear-gradient(135deg, #16357e, #008579, #b0b4b9);
+  display: block;
+  height: 100vh;
+  width: 100%;
+  position:fixed;
+}
+
+
+.loader .ring{
+  position: relative;
+  width: 150px;
+  height: 150px;
+  border: 4px solid transparent;
+  border-radius: 50%;
+  margin: -30px;
+  border-top-color:white;
+  animation:spinner 2s linear infinite;
+}
+.loader .ring:nth-child(1):before{
+  content: " ";
+  position: absolute;
+  height: .8rem;
+  width: .8rem;
+  background: rgb(255, 255, 255);
+  box-shadow: 0 0 0 5px rgb(150, 150, 190),
+  0 0 20px rgb(190, 170, 170);
+  border-radius: 50%;
+  right: 9px;
+  top: 17px;
+
+}
+
+.loader .ring:nth-child(1){
+  animation-delay: -11s;
+}
+
+.loader .ring:nth-child(2){
+  border-bottom-color:violet;
+  border-top-color:transparent;
+  animation:spinner2 2s linear infinite;
+  animation-delay: -4s;
+}
+.loader .ring:nth-child(2)::before{
+  content: " ";
+  position: absolute;
+  height: .8rem;
+  width: .8rem;
+  background: rgb(238, 130, 238);
+  box-shadow: 0 0 0 5px rgb(238, 200, 200),
+  0 0 20px rgb(238, 230, 230);
+  border-radius: 50%;
+  right: 9px;
+  top: 120px;
+}
+
+.loader .ring:nth-child(3){
+  border-right-color:hsl(84, 100%, 59%);
+  border-top-color:transparent;
+  animation:spinner2 2s linear infinite;
+  animation-delay: -2s;
+  position: absolute;
+  top:220px ;
+  /* border: 4px solid ; */
+}
+.loader .ring:nth-child(3)::before{
+  content: " ";
+  position: absolute;
+  height: .8rem;
+  width: .8rem;
+  background: rgb(171, 255, 46);
+  box-shadow: 0 0 0 5px rgb(171, 230, 200),
+  0 0 20px rgb(190, 170, 170);
+  border-radius: 50%;
+  right: 9px;
+  top: 17px;
+
+}
+
+@keyframes spinner2 {
+  0%{
+    transform: rotate(360deg);
+  }
+  100%{
+    transform: rotate(0deg);
+  }
+
+}
+
+@keyframes spinner {
+  100%{
+    transform: rotate(360deg);
+  }  
+}
+
+
+.loader p{
+  position: absolute;
+  color: white;
+  top: 27rem;
+  font-size: 4rem;
+  letter-spacing: 0.8rem;
+  font-family: "Ubuntu";
+}
+
+/* ------preloader-finish------ */
+
 a {
   text-decoration: none;
 }

diff --git a/django-web-app/static/js/script.js b/django-web-app/static/js/script.js
@@ -194,3 +194,12 @@ document.addEventListener('DOMContentLoaded', (event) => {
       document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
   });
 });
+
+window.addEventListener("load", myLoad);
+const Preloader = document.querySelector(".preloader4");
+
+function myLoad(){
+  setTimeout(() => {
+    Preloader.style.display = "none";
+  }, 1000);
+}
diff --git a/django-web-app/templates/index.html b/django-web-app/templates/index.html
@@ -8,6 +8,15 @@
 
 {% include 'messages.html' %}
 
+<div class="preloader4">
+  <div class="loader">
+    <div class="ring"></div>
+    <div class="ring"></div>
+    <div class="ring"></div>
+    <p>CogniGuard</p>
+  </div>
+</div>
+
 <section class="content-section">
     <section class="elastic-section">
         <div class="container-first">