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;