Using loading spinner and ellipsis to indicate an action in progress
Currently, in the Copy: Punctuation section of the UX Guide, we have the following regarding the use of ellipsis:
Use to indicate an action in progress (“Downloading…”) or incomplete or truncated text. No space before the ellipsis. Omit from menu items or buttons that open a dialog or start some other process.
However, there are many places in the UI where ellipsis aren't used to indicate an action in progress. This leads to inconsistencies as we try to apply this guideline to newer situations.
Questions:
- Are we in agreement that we should use ellipsis this way?
- Should or shouldn't we combine that with a loading spinner? Is it too redundant? Example:
Proposal
Choose the design that matches the task's most common duration. Example: if we assess that adding a todo usually takes less than 1s for most users, we don't use any progress indicator, changes appear instantly or faux-instantly, no matter the user connection.
- Less than 1s: no progress indicator, changes appear instantly or faux-instantly
- 1–4s: use a spinner and no label
- More than 4s…
- and indeterminate (unknown or difficult to determine duration): use a spinner and complement with
Action…
- and determinate (known duration): use a progress bar and…
- less than 1 min: complement with
Action…
and progress percentage - more than 1 min: complement with
Action…
and waiting time
- less than 1 min: complement with
- and indeterminate (unknown or difficult to determine duration): use a spinner and complement with
So, if a user presses a button and the action takes 1–4s, we can simply hide the button label and show the spinner centered, as the user is still in context. This also avoids having buttons changing width. Example:
Resting | Loading |
---|---|
![]() |
![]() |
When the task usually takes more than 4s but it's difficult to determine the duration (indeterminate), and it happens on the server side, it's worth adding both the spinner and label with an ellipsis. This is because the user loses context after a while and may revisit the screen later while the action is still in progress, so it's important to clarify what's happening. Example: “[spinner] Installing Prometheus in your cluster…”