From be77e86e029e8136733ef95e1fbfd5d05a80d00b Mon Sep 17 00:00:00 2001
From: 3zachm <3zachn4@gmail.com>
Date: Tue, 27 Dec 2022 05:03:56 -0800
Subject: [PATCH] loading component

---
 components/common/Loading.module.css | 66 ++++++++++++++++++++++++++++
 components/common/Loading.tsx        | 15 +++++++
 2 files changed, 81 insertions(+)
 create mode 100644 components/common/Loading.module.css
 create mode 100644 components/common/Loading.tsx

diff --git a/components/common/Loading.module.css b/components/common/Loading.module.css
new file mode 100644
index 0000000..c902689
--- /dev/null
+++ b/components/common/Loading.module.css
@@ -0,0 +1,66 @@
+.ldsEllipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.ldsEllipsis div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #fff;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.ldsEllipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+
+.ldsEllipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.ldsEllipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.ldsEllipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(24px, 0);
+  }
+}
diff --git a/components/common/Loading.tsx b/components/common/Loading.tsx
new file mode 100644
index 0000000..89f9ea4
--- /dev/null
+++ b/components/common/Loading.tsx
@@ -0,0 +1,15 @@
+import styles from "./Loading.module.css";
+
+// https://loading.io/css/
+function Loading() {
+  return (
+    <div className={styles.ldsEllipsis}>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  );
+}
+
+export default Loading;