@dodlhuat/basix 1.0.0 → 1.1.1

package/css/spinner.scss

@@ -1,91 +1,66 @@
 @use "properties";
+@use "parameters" as *;
 
 .spinner {
-  width: 48px;
-  height: 48px;
-  border: 5px solid var(--accent-color);
-  border-bottom-color: transparent;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 3px solid var(--divider);
+  border-top-color: var(--accent-color);
   border-radius: 50%;
   display: inline-block;
-  box-sizing: border-box;
-  animation: rotation 1s linear infinite;
-}
+  animation: spinner-rotate 0.8s ease-in-out infinite;
 
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
+  &.small {
+    width: 1.25rem;
+    height: 1.25rem;
+    border-width: 2px;
   }
-  100% {
-    transform: rotate(360deg);
+
+  &.large {
+    width: 3.5rem;
+    height: 3.5rem;
+    border-width: 4px;
   }
 }
 
-.loading, .loading::before, .loading::after {
-  border-radius: 50%;
-  background-color: var(--accent-color);
-  width: 18px;
-  height: 18px;
-  display: inline-block;
+@keyframes spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .loading {
-  position: relative;
-  background-color: rgba(var(--accent-color), 1);
-  opacity: 1;
-  animation: spScaleAlpha 1s infinite linear;
-}
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
 
-.loading::before, .loading::after {
-  content: '';
-  position: absolute;
-  opacity: 0.25;
-}
-
-.loading::before {
-  left: 30px;
-  animation: spScaleAlphaBefore 1s infinite linear;
-}
-
-.loading::after {
-  left: -30px;
-  animation: spScaleAlphaAfter 1s infinite linear;
-}
-
-@keyframes spScaleAlpha {
-  0% {
-    opacity: 1;
+  &::before,
+  &::after,
+  span {
+    content: '';
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background-color: var(--accent-color);
+    animation: loading-pulse 1.2s ease-in-out infinite;
   }
-  33% {
-    opacity: 0.25;
-  }
-  66% {
-    opacity: 0.25;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 
-@keyframes spScaleAlphaBefore {
-  0% {
-    opacity: 0.25;
-  }
-  33% {
-    opacity: 1;
+  span {
+    animation-delay: 0.15s;
   }
-  66% {
-    opacity: 0.25;
+
+  &::after {
+    animation-delay: 0.3s;
   }
 }
 
-@keyframes spScaleAlphaAfter {
-  33% {
+@keyframes loading-pulse {
+  0%, 80%, 100% {
     opacity: 0.25;
+    transform: scale(0.8);
   }
-  66% {
+  40% {
     opacity: 1;
-  }
-  100% {
-    opacity: 0.25;
+    transform: scale(1);
   }
 }