Spinner
Visual aids can be very helpful in an application but for people who cannot see them they can sometimes seriously degrade the overall experience of the web application if these aids carry important information.
An often used aid in JavaScript application is the busy spinner.
Tenon-UI gives you an Spinner component you can use overall. This component already has accessibility built in.
Usage
The spinner can be imported and used as a normal component:
The Spinner can easily be styled and sized:
This will display as:
Component props
title
This is required.
A string value describing the spinner. Please use this to describe the purpose of the spinner, such as "Busy fetching user data.".
Without a proper title, such spinners are inaccessible to a large number of people.
className
You can use this to give a class to the internal SVG so that you can style it with CSS as shown above.