Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
React loading animation with three dots which can be displayed while data is being fetched from an API.
Supports React v18 and v19.
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" /> ...