Loading State for Button

components/ui/LoadingDots/LoadingDots.module.css

@@ -0,0 +1,32 @@
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+
+.loading {
+  @apply inline-flex text-center items-center leading-7;
+
+  & span {
+    @apply bg-accent-6 rounded-full h-2 w-2;
+    animation-name: blink;
+    animation-duration: 1.4s;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+    margin: 0 2px;
+
+    &:nth-of-type(2) {
+      animation-delay: 0.2s;
+    }
+
+    &:nth-of-type(3) {
+      animation-delay: 0.4s;
+    }
+  }
+}

components/ui/LoadingDots/LoadingDots.tsx

@@ -0,0 +1,13 @@
+import s from './LoadingDots.module.css'
+
+const LoadingDots: React.FC = () => {
+  return (
+    <span className={s.loading}>
+      <span />
+      <span />
+      <span />
+    </span>
+  )
+}
+
+export default LoadingDots

components/ui/LoadingDots/index.ts

@@ -0,0 +1 @@
+export { default } from './LoadingDots'