diff --git a/src/components/loading-ellipsis/index.ts b/src/components/loading-ellipsis/index.ts
new file mode 100644
index 00000000..c201e034
--- /dev/null
+++ b/src/components/loading-ellipsis/index.ts
@@ -0,0 +1 @@
+export { default } from './loading-ellipsis';
diff --git a/src/components/loading-ellipsis/loading-ellipsis.module.css b/src/components/loading-ellipsis/loading-ellipsis.module.css
new file mode 100644
index 00000000..69049ce1
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/src/components/loading-ellipsis/loading-ellipsis.tsx b/src/components/loading-ellipsis/loading-ellipsis.tsx
new file mode 100644
index 00000000..639d62f4
--- /dev/null
+++ b/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;