add loading ellipsis component

src/components/loading-ellipsis/index.ts

@@ -0,0 +1 @@
+export { default } from './loading-ellipsis';

src/components/loading-ellipsis/loading-ellipsis.module.css

@@ -0,0 +1,24 @@
+.ellipsis {
+  display: inline-block;
+}
+
+.ellipsis:after {
+  content: '...';
+  position: absolute;
+  -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
+  animation: ellipsis steps(4, end) 1500ms infinite;
+  width: 0px;
+  overflow: hidden;
+}
+
+@keyframes ellipsis {
+  to {
+    width: 1.3em;
+  }
+}
+
+@-webkit-keyframes ellipsis {
+  to {
+    width: 1.3em;
+  }
+}

src/components/loading-ellipsis/loading-ellipsis.tsx

@@ -0,0 +1,11 @@
+import styles from './loading-ellipsis.module.css';
+
+interface LoadingEllipsisProps {
+  string: string;
+}
+
+const LoadingEllipsis = ({ string }: LoadingEllipsisProps) => {
+  return <span className={styles.ellipsis}>{string}</span>;
+};
+
+export default LoadingEllipsis;