add loader

Author: Pakistanka

components/Loader.tsx

@@ -4,7 +4,7 @@ const Loader = () => {
   return (
     <>
       <div className="h-screen flex items-center justify-center">
-        <button
+        {/* <button
           disabled
           type="button"
           className="text-white bg-primary  font-medium rounded text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center"
@@ -27,7 +27,17 @@ const Loader = () => {
             />
           </svg>
           Loading...
-        </button>
+        </button> */}
+        <section className="loading">
+          <div className="lds-css ng-scope">
+              <div className="lds-cube">
+              <div></div>
+              <div></div>
+              <div></div>
+              <div></div>
+              </div>
+          </div>
+        </section>
       </div>
     </>
   );

components/shared/LoadingPlaceHolder.tsx

@@ -3,7 +3,17 @@ import React from 'react'
 const LoadingPlaceHolder = () => {
     return (
         <div className="w-full h-[60vh] flex items-center justify-center">
-            <button
+            <section className="loading">
+                <div className="lds-css ng-scope">
+                    <div className="lds-cube">
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                    </div>
+                </div>
+                </section>
+            {/* <button
                 disabled
                 type="button"
                 className="text-white bg-primary  font-medium rounded text-sm px-5 py-2.5 text-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 inline-flex items-center"
@@ -26,9 +36,9 @@ const LoadingPlaceHolder = () => {
                     />
                 </svg>
                 Loading...
-            </button>
+            </button> */}
         </div>
     )
 }
 
-export default LoadingPlaceHolder
+export default LoadingPlaceHolder

styles/style.css

@@ -212,3 +212,78 @@ input[type='number'] {
     overflow: hidden !important;
   }
 }
+
+.loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  min-width: 100%;
+  min-height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index:10000 !important;
+}
+.loading .lds-cube {
+  position: relative;
+}
+.loading .lds-cube div {
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  top: 10px;
+  left: 10px;
+  background: #fc4309;
+  -webkit-animation: lds-cube 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+  animation: lds-cube 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+.loading .lds-cube div:nth-child(2) {
+  top: 10px;
+  left: 110px;
+  background: #ff765c;
+  -webkit-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.loading .lds-cube div:nth-child(3) {
+  top: 110px;
+  left: 110px;
+  background: #ff9900;
+  -webkit-animation-delay: 0s;
+  animation-delay: 0s;
+}
+.loading .lds-cube div:nth-child(4) {
+  top: 110px;
+  left: 10px;
+  background: #ffb646;
+  -webkit-animation-delay: -0.1s;
+  animation-delay: -0.1s;
+}
+.loading .lds-cube {
+  width: 200px !important;
+  height: 200px !important;
+  -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
+  transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
+}
+@keyframes lds-cube {
+  0% {
+    -webkit-transform: scale(1.5);
+    transform: scale(1.5);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+@-webkit-keyframes lds-cube {
+  0% {
+    -webkit-transform: scale(1.5);
+    transform: scale(1.5);
+  }
+  100% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+