Expressive loader
Leveraging a branded expression, the expressive loader provides reassurance, guidance, and delight. The expressive loader is used as an alternative to the progress spinner, especially for longer loading times.
Our accessibility section covers only the key considerations that impact design thinking at a page level, such as keyboard interaction, heading structure and landmarks. For exhaustive pattern level details & guidance for the web, please visit eBay MIND Patterns.
Alternative text
Alternative text for the graphic (e.g. “loading,” “in progress” or similar) is needed. The suggested format is, “Loading…”.
Keyboard interaction
The expressive loader is a non-interactive graphical element and therefore should not be in the page’s tab sequence.
Focus management: the application developer may decide to set programmatic keyboard focus (i.e. tabindex=”-1”) onto the loader in certain cases (e.g. when used as the sole element inside of a modal dialog).
Live region
The onscreen messages must be announced in the screen reader as soon as they appear.
Reduced motion
Where supported by the platform, there should be a “prefers reduced motion” version that users who have enabled this preference receive.
Bars only
In the reduced motion version, each bar should have a width of 10% to 40% of its container. Instead of scaling from 0% to their max width, they should start as their max width and animate across the screen over the course of 10 seconds.
Bars with large text
With large text, the first string of support text should fade in over 833 milliseconds. Each string of support text should display for 2.25 seconds before switching to the next string. There is no animation between one string and the next.
Bars with small text
With small text, the first string of support text should be present immediately and not fade in.