Number counter
Other names: number animation
The number counter adds animation and counts up to a set number.
Sample
300
300
Usage
When and how to use it
Use the rolling number counter component to add visual variety to important data. This is often used on homepages.
How not to use it
Do not use the rolling number counter in multiple sections of your webpage.
Do not use the number counter for dates.
Accessibility
Standard accessibility review
Each time a new component version is published:
- Test with the axe accessibility tool
- Review with the VoiceOver or NVDA screen reader
- Ensure all actionable elements are accessible by keyboard command and tab in a logical order
- Check the component layout on a variety of screen sizes