From 81b1e0e05919eb368a66aef47adcf7738af76f29 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 29 Sep 2023 11:47:06 +0200
Subject: refactor(components): rewrite Spinner component

* Message should be set as children
* Default message is no longer available (depending on use case, the
consumer might prefer aria-label instead)
* It is now possible to define the message position
---
 .../atoms/loaders/spinner/spinner.module.scss      | 69 ++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/components/atoms/loaders/spinner/spinner.module.scss

(limited to 'src/components/atoms/loaders/spinner/spinner.module.scss')

diff --git a/src/components/atoms/loaders/spinner/spinner.module.scss b/src/components/atoms/loaders/spinner/spinner.module.scss
new file mode 100644
index 0000000..97882a4
--- /dev/null
+++ b/src/components/atoms/loaders/spinner/spinner.module.scss
@@ -0,0 +1,69 @@
+@use "../../../../styles/abstracts/functions" as fun;
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: fit-content;
+
+  &--left {
+    flex-flow: row-reverse wrap;
+  }
+
+  &--right {
+    flex-flow: row wrap;
+  }
+
+  &--bottom {
+    flex-flow: column nowrap;
+  }
+
+  &--top {
+    flex-flow: column-reverse nowrap;
+  }
+}
+
+.icon {
+  --ball-size: #{fun.convert-px(8)};
+
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  width: calc((var(--ball-size) * 3) + var(--spacing-xs));
+
+  &__ball {
+    width: var(--ball-size);
+    height: var(--ball-size);
+    background: linear-gradient(
+      to right,
+      var(--color-primary-light) 0%,
+      var(--color-primary-lighter) 100%
+    );
+    border-radius: 50%;
+    animation: spinner 1.4s infinite ease-in-out both;
+
+    &:first-child {
+      animation-delay: -0.32s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: -0.16s;
+    }
+  }
+}
+
+.body {
+  color: var(--color-primary-darker);
+}
+
+@keyframes spinner {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+  }
+}
-- 
cgit v1.2.3