Change loader

src/components/Spinner/index.css

@@ -1,41 +1,63 @@
-.lds-ring {
+.lds-ellipsis {
   display: inline-block;
   position: relative;
   width: 80px;
   height: 80px;
-  color: white;
 }
 
-.lds-ring div {
-  box-sizing: border-box;
-  display: block;
+.lds-ellipsis div {
   position: absolute;
-  width: 64px;
-  height: 64px;
-  margin: 8px;
-  border: 8px solid #fff;
+  top: 33px;
+  width: 13px;
+  height: 13px;
   border-radius: 50%;
-  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #fff transparent transparent transparent;
+  background: #fff;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
 }
 
-.lds-ring div:nth-child(1) {
-  animation-delay: -0.45s;
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
 }
 
-.lds-ring div:nth-child(2) {
-  animation-delay: -0.3s;
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
 }
 
-.lds-ring div:nth-child(3) {
-  animation-delay: -0.15s;
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
 }
 
-@keyframes lds-ring {
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes lds-ellipsis2 {
   0% {
-    transform: rotate(0deg);
+    transform: translate(0, 0);
   }
   100% {
-    transform: rotate(360deg);
+    transform: translate(24px, 0);
   }
 }

src/components/Spinner/index.js

@@ -11,19 +11,12 @@ function Spinner() {
                 justifyContent: "center",
                 height: "100vh",
             }}>
-            <div className="lds-ring">
+            <div class="lds-ellipsis">
                 <div></div>
                 <div></div>
                 <div></div>
                 <div></div>
             </div>
-            {/*<div*/}
-            {/*    className="m-12 inline-block h-8 w-8 text-white animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"*/}
-            {/*    role="status">*/}
-            {/*    <span className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">*/}
-            {/*        .*/}
-            {/*    </span>*/}
-            {/*</div>*/}
         </div>
     );
 }