Background
A loader-type animation displaying three dots that progressively change in size is currently used within some components and areas in Wikimedia products to indicate that something is loading or a process is in progress.
We should collect and analyze existing use cases in order to define the recommendations and styles (sizes, colors, animation) of this potential Codex component.
Description
The ProgressIndicator is aimed at communicating to users that the system is actively working to retrieve information or complete a task, thus managing their expectations by indicating that waiting is required.
This loading element is usually displayed in page areas of different sizes, as well as within components.
Find a code prototype of the former/now outdated bouncing dot animation in this Codepen.
User stories
- As a designer and developer, I want to be able to reuse a loading animation component to indicate that the system is actively working on a task requested by a user
History
- This component has been identified/documented in different tasks:
T266028: Add “Progress indicators” to DSG
T289989: Add loading spinner component.
Known use cases
 | Special:RecentChanges/RCFilters |
| Watchlist/RC filter loading panel | |
 | Upload Wizard |
 | Wikibase Date input component: the loader indicates that the input is being processed. As documented in this component's Guidelines, we will not use a ProgressIndicator for Menu loads; instead, we will use an Inline ProgressBar. |
Existing implementations
These artifacts are listed for historical context. The Figma spec, linked below, is the source of truth for the new component.
Wikimedia community:
- Design style guide: -
- OOUI: -
- Vue: WiKit's BouncingDots Loader (See demo, see source, see design specifications)
External libraries:
- Add links to any examples from external libraries
Codex implementation
Component task owners
- Designer: @SGautam_WMF / @bmartinezcalvo
- Developer: @Volker_E
Open questions
- One overarching architectural question for both, Vue and CSS-only version, but also as possible expansion to ProgressBar is using <progress> HTML5 element over a <div> and ARIA roles and attributes mix.
@Volker_E's proposal is to use <progress> here to follow ARIA principle of always prefer using semantic elements over roles and attributes.
In DST engineering sync 2025-02-18 we agreed on going that route. With special quality assurance attention is given to older or niche browser rendering engines at low risk as in this case the widely browser supported .screen-reader-text() mixin is applied.
Design spec
A spinner indicator that animates to show loading status. This component maintains consistency across desktop (Vector 22) and mobile (Minerva) layouts.
Core Properties
- One single size: size-icon-medium (20px)
- Color: border-color-progressive
- Border: border-width-thick
- Spacing between spinner and text: spacing-50 (8px)
Animation Specifications
- Type: Continuous clockwise rotation
- Duration: 1000ms per full rotation (was originally 1200ms in design, but agreed to sped it up)
- Timing: animation-timing-function-linear
- Iteration: animation-iteration-count-base
Guidelines
Acceptance criteria
Minimum viable product
This task covers the minimum viable product (MVP) version of this component. MVP includes basic layout, default states, and most important functionality.
MVP scope
- T373218: ProgressIndicator: Introduce a WIP component
- T373219: ProgressIndicator: Add CSS-only version
- T373220: ProgressIndicator: Add component guidelines
Design
- Design the Figma spec sheet and add a link to it in this task
- Update the component in the Figma library. This step will be done by a DST member.
Code
- Implement the component in Codex
