refactor: add a loading state to Button

1 files changed, 102 insertions, 0 deletions

diff --git a/src/components/shared/Basic.module.css b/src/components/shared/Basic.module.css
index 8e3e65c..8e5a113 100644
--- a/src/components/shared/Basic.module.css
+++ b/src/components/shared/Basic.module.css
@@ -12,3 +12,105 @@ h2.sectionNameType {
     margin: 0 0.3em;
   }
 }
+
+/**
+ * loading dots
+ *
+ * light
+ * dot color is #000 (black)
+ *
+ * transparency change:
+ *          dot1  dot2  do3
+ * phase1   0.1   0.3   0.5
+ * phase2   0.5   0.1   0.3
+ * phase3   0.3   0.5   0.1
+ *
+ * dark
+ * dot color is #fff (white)
+ *
+ * transparency change:
+ *          dot1  dot2  do3
+ * phase1   0.5   0.3   0.1
+ * phase2   0.1   0.5   0.3
+ * phase3   0.3   0.1   0.5
+ *
+ */
+
+:global {
+  body.light {
+    /*
+     * --loading-dot-{dot-index}-{dot-keyframe-phase}
+     */
+    --loading-dot-1-1: rgba(0, 0, 0, 0.1);
+    --loading-dot-1-2: rgba(0, 0, 0, 0.5);
+    --loading-dot-1-3: rgba(0, 0, 0, 0.3);
+    --loading-dot-2-1: rgba(0, 0, 0, 0.3);
+    --loading-dot-2-2: rgba(0, 0, 0, 0.1);
+    --loading-dot-2-3: rgba(0, 0, 0, 0.5);
+    --loading-dot-3-1: rgba(0, 0, 0, 0.5);
+    --loading-dot-3-2: rgba(0, 0, 0, 0.3);
+    --loading-dot-3-3: rgba(0, 0, 0, 0.1);
+  }
+  body.dark {
+    --loading-dot-1-1: rgba(255, 255, 255, 0.5);
+    --loading-dot-1-2: rgba(255, 255, 255, 0.1);
+    --loading-dot-1-3: rgba(255, 255, 255, 0.3);
+    --loading-dot-2-1: rgba(255, 255, 255, 0.3);
+    --loading-dot-2-2: rgba(255, 255, 255, 0.5);
+    --loading-dot-2-3: rgba(255, 255, 255, 0.1);
+    --loading-dot-3-1: rgba(255, 255, 255, 0.1);
+    --loading-dot-3-2: rgba(255, 255, 255, 0.3);
+    --loading-dot-3-3: rgba(255, 255, 255, 0.5);
+  }
+}
+
+.loadingDot,
+.loadingDot:before,
+.loadingDot:after {
+  display: inline-block;
+  vertical-align: middle;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  font-size: 0;
+}
+
+.loadingDot {
+  $d: 1s;
+
+  position: relative;
+  background-color: var(--loading-dot-2-1);
+  animation: dot2 $d step-start infinite;
+  &:before {
+    content: '';
+    position: absolute;
+    left: -12px;
+    background-color: var(--loading-dot-1-1);
+    animation: dot1 $d step-start infinite;
+  }
+  &:after {
+    content: '';
+    position: absolute;
+    right: -12px;
+    background-color: var(--loading-dot-3-1);
+    animation: dot3 $d step-start infinite;
+  }
+}
+/* prettier-ignore */
+@keyframes dot1 {
+  0%, 100% { background-color: var(--loading-dot-1-1) }
+  33% { background-color: var(--loading-dot-1-2) }
+  66% { background-color: var(--loading-dot-1-3) }
+}
+/* prettier-ignore */
+@keyframes dot2 {
+  0%, 100% { background-color: var(--loading-dot-2-1) }
+  33% { background-color: var(--loading-dot-2-2) }
+  66% { background-color: var(--loading-dot-2-3) }
+}
+/* prettier-ignore */
+@keyframes dot3 {
+  0%, 100% { background-color: var(--loading-dot-3-1) }
+  33% { background-color: var(--loading-dot-3-2) }
+  66% { background-color: var(--loading-dot-3-3) }
+}