feat(loader): updated loader animation

packages/loader/src/index.module.css

@@ -1,40 +1,47 @@
-:root {
-    --loader-animation-duration: 750ms;
-}
-
 .component {
     fill: currentColor;
 
     & circle {
         animation-name: blink;
-        animation-duration: var(--loader-animation-duration);
+        animation-duration: 950ms;
         animation-iteration-count: infinite;
-        animation-timing-function: ease-out;
+        animation-timing-function: ease-in-out;
     }
 
     & circle:nth-child(1) {
         animation-delay: 0ms;
+        transform-origin: 15% 50%;
     }
 
     & circle:nth-child(2) {
-        animation-delay: calc(var(--loader-animation-duration) / 3);
+        animation-delay: 150ms;
+        transform-origin: 50% 50%;
     }
 
     & circle:nth-child(3) {
-        animation-delay: calc(var(--loader-animation-duration) * 2 / 3);
+        animation-delay: 300ms;
+        transform-origin: 85% 50%;
     }
 }
 
 @keyframes blink {
     0% {
-        opacity: 0.2;
+        transform: scale(0);
+    }
+
+    21% {
+        transform: scale(1);
+    }
+
+    47% {
+        transform: scale(1);
     }
 
-    60% {
-        opacity: 0.5;
+    68% {
+        transform: scale(0);
     }
 
     100% {
-        opacity: 1;
+        transform: scale(0);
     }
 }