Commit1

Counselllor · Jul 3, 2024 · 8291fa6 · 8291fa6
1 parent d766408
commit 8291fa6
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -24,7 +24,15 @@
     <title>Counsellor Portal</title>
   </head>
   <body>
-    <div id="root">Loading............</div>
+    <div >.</div>
+    <div id="root" class="box">
+      <div class="container">
+        <span class="dot"></span>
+        <span class="dot"></span>
+        <span class="dot"></span>
+        <span class="dot"></span>
+      </div>
+    </div>
     <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>
diff --git a/preloading.css b/preloading.css
@@ -1,3 +1,13 @@
+
+body{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  background: white;
+}
+
 .center-loader {
   height: 100vh;
   width: 100%;
@@ -27,3 +37,44 @@
   font-size: 2.2rem;
   text-transform: uppercase;
 }
+
+
+.container{
+  height: 15px;
+  width: 105px;
+  display: flex;
+  position: relative;
+  .dot{
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background-color: blue;
+    animation: move 700ms linear 0ms infinite;
+    margin-right: 30px;
+
+    &:first-child{
+      position: absolute;
+      top:0;
+      left:0;
+      animation: grow 700ms linear 0ms infinite;
+    }
+
+    &:last-child{
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin-right: 0;
+      animation: grow 700ms linear 0s infinite reverse;
+    }
+  }
+}
+
+@keyframes grow {
+  from {transform: scale(0,0); opacity: 0;}
+  to {transform: scale(1,1); opacity: 1;}
+}
+
+@keyframes move {
+  from {transform: translateX(0px)}
+  to {transform: translateX(45px)}
+}
diff --git a/src/components/Loading/Loading.css b/src/components/Loading/Loading.css
@@ -0,0 +1,77 @@
+.center-loader {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    background-color: #5cb6f9;
+  }
+
+  .center-loader img {
+    width: 10vw;
+  }
+
+  .center-loader .pre-text {
+    position: absolute;
+    bottom: 0;
+    text-align: center;
+    font-weight: 600;
+  }
+
+  .center-loader p {
+    font-size: 1.8rem;
+  }
+
+  .center-loader span {
+    font-size: 2.2rem;
+    text-transform: uppercase;
+  }
+  .spinner {
+    height:@dim;
+    width:@dim;
+  //   margin:0 auto;
+  //   position:relative;
+   position: absolute;
+   top:50%;
+   left:50%;
+   margin: -(@dim/2) 0 0 -(@dim/2);
+    -webkit-animation: rotation 1s infinite linear;
+    -moz-animation: rotation 1s infinite linear;
+    -o-animation: rotation 1s infinite linear;
+    animation: rotation 1s infinite linear;
+    border:6px solid rgba(0,0,0,.2);
+    border-radius:100%;
+  }
+
+  .spinner:before {
+    content:"";
+    display:block;
+    position:absolute;
+    left:-6px;
+    top:-6px;
+    height:100%;
+    width:100%;
+    border-top:6px solid rgba(0,0,0,.8);
+    border-left:6px solid transparent;
+    border-bottom:6px solid transparent;
+    border-right:6px solid transparent;
+    border-radius:100%;
+  }
+
+  @-webkit-keyframes rotation {
+    from {-webkit-transform: rotate(0deg);}
+    to {-webkit-transform: rotate(359deg);}
+  }
+  @-moz-keyframes rotation {
+    from {-moz-transform: rotate(0deg);}
+    to {-moz-transform: rotate(359deg);}
+  }
+  @-o-keyframes rotation {
+    from {-o-transform: rotate(0deg);}
+    to {-o-transform: rotate(359deg);}
+  }
+  @keyframes rotation {
+    from {transform: rotate(0deg);}
+    to {transform: rotate(359deg);}
+   }
diff --git a/src/components/Loading/Loading.jsx b/src/components/Loading/Loading.jsx
@@ -1,5 +1,5 @@
 import HashLoader from "react-spinners/HashLoader";
-
+import './Loading.css'
 const Loading = () => {
   return (
     <div className="loader ">