React loading animation which can be displayed while data is fetched from an API.
npm i fetch-loading
import { FetchLoading } from 'fetch-loading'
...
<FetchLoading />
### with no arguments being passed,
### the animation will fall back to its default color #52525c,
### and it will not contain any accessible attributes
...
You can also pass any Hex- / RGB- or RGBA-value as an argument for the theme property:
...
<FetchLoading theme="#121" />
<FetchLoading theme="#608c" />
<FetchLoading theme="#ffe98c" />
<FetchLoading theme="#ff1e2cf0" />
<FetchLoading theme="rgb(178, 165, 253)" />
<FetchLoading theme="rgba(131, 240, 131, 0.8)" />
...
By passing a descriptive value for ariaLabel, the following properties are added:
...
<FetchLoading ariaLabel="Loading" />
### role="status"
### aria-live="polite"
### aria-label="Loading"
...
This results in screen reader users hearing “Status - Loading” being read aloud.
Of course, theme and ariaLabel can also be used simultaneously:
...
<FetchLoading ariaLabel="Loading" theme="#ffe98c"/>
...