## 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 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 BouncingDots loader (name tbd) displays three filled circles that progressively increase and decrease in size, one at a time, from left to right. The animation 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 element in [[ https://codepen.io/Volker_E/pen/yqNXMe | 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:
{https://phabricator.wikimedia.org/T266028}
{https://phabricator.wikimedia.org/T289989}.
### Known use cases
| {F33930179 width=50%} | [[ https://en.wikipedia.org/wiki/Special:RecentChanges | Special:RecentChanges ]]/RCFilters |
| | [[ https://gerrit.wikimedia.org/g/mediawiki/core/+/975083da4f205ab0290950bdf537b5aa3ab5701f/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less | Watchlist/RC filter loading panel ]] |
| {F37672147} | Wikibase Date input component: the loader indicates that the input is being processed |
### 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 ([[ https://wmde.github.io/wikit/?path=/story/vue_loader-bouncingdots--all | See demo ]], [[ https://github.com/wmde/wikit/blob/master/vue-components/src/components/BouncingDots.vue | see source ]], [[ https://www.figma.com/file/gi3JYwSUQYhKS0mHwK25cQwi/WiKit-Design-System?type=design&node-id=8426-1&mode=design&t=NI0TfsdaFtGumZyl-0 | see design specifications ]])
**External libraries:**
- //Add links to any examples from external libraries//
---
## Codex implementation
### Component task owners
- Designer: //add the main designer's name//
- Developer: //add the main developer's name//
### Open questions
[]
### Design spec
// Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below. //
A component spec sheet has not been created yet.
| Component spec sheet |
#### Anatomy
//Designer should list the structure and properties of the component.//
#### Style
//Designer should list the visual features of the component.//
#### Interaction
//Designer should list interaction specifications.//
#### Documentation
//Designer should describe how the component should be documented, including configurable and standalone demos.//
---
## 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**
- [] //List all parts of the MVP scope for this component//
**Design**
- [] Design the Figma spec sheet and add a link to it in this task
- [] Update the component in the [Figma library](https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28). //This step will be done by a DST member.//
**Code**
- [] Implement the component in Codex
### Future work
- //If applicable, list future work that should be done for this component after the MVP is implemented as part of this task. You should open new, standalone tasks for all future work.//