diff --git a/src/components/loading-ellipsis/loading-ellipsis.module.css b/src/components/loading-ellipsis/loading-ellipsis.module.css
index d840bd8e..7e1e6993 100644
--- a/src/components/loading-ellipsis/loading-ellipsis.module.css
+++ b/src/components/loading-ellipsis/loading-ellipsis.module.css
@@ -1,22 +1,52 @@
+.nowrap {
+ white-space: nowrap;
+}
+
+.ellipsis {
+ display: inline-block;
+ width: 4ch;
+}
+
.ellipsis:after {
- overflow: hidden;
display: inline-block;
- position: absolute;
vertical-align: bottom;
- -webkit-animation: ellipsis steps(4,end) 1500ms infinite;
- animation: ellipsis steps(4,end) 1500ms infinite;
- content: "\2026"; /* ascii code for the ellipsis character */
- width: 0px;
+ -webkit-animation: ellipsis 1500ms steps(4, end) infinite;
+ animation: ellipsis 1500ms steps(4, end) infinite;
+ content: "";
}
@keyframes ellipsis {
- to {
- width: 1.25em;
+ 0% {
+ content: "";
+ }
+ 25% {
+ content: ".";
+ }
+ 50% {
+ content: "..";
+ }
+ 75% {
+ content: "...";
+ }
+ 100% {
+ content: "";
}
}
@-webkit-keyframes ellipsis {
- to {
- width: 1.25em;
+ 0% {
+ content: "";
+ }
+ 25% {
+ content: ".";
+ }
+ 50% {
+ content: "..";
+ }
+ 75% {
+ content: "...";
+ }
+ 100% {
+ content: "";
}
}
\ No newline at end of file
diff --git a/src/components/loading-ellipsis/loading-ellipsis.tsx b/src/components/loading-ellipsis/loading-ellipsis.tsx
index 639d62f4..b94f4600 100644
--- a/src/components/loading-ellipsis/loading-ellipsis.tsx
+++ b/src/components/loading-ellipsis/loading-ellipsis.tsx
@@ -5,7 +5,20 @@ interface LoadingEllipsisProps {
}
const LoadingEllipsis = ({ string }: LoadingEllipsisProps) => {
- return {string};
+ const words = string.split(' ');
+ const lastWord = words.pop();
+ const restOfString = words.join(' ');
+
+ return (
+
+ {restOfString}
+ {restOfString && ' '}
+
+ {lastWord}
+
+
+
+ );
};
export default LoadingEllipsis;