Loader
!npm
Loaders provide a visual cue about tasks running in the background, like fetching data. Use Loaders when the progress of the task is non-deterministic. There are two types of loaders:
* Loader (Dot)
* Spinner
Loaders come in different sizes and intents.
``jsx
import { Loader, Spinner } from "@asphalt-react/loader"
`
* Loader and Spinner supports preferred reduce motion accessibility feature. Enabling the Reduce Motion setting slows down the animation.
* Loaders (both Dot and Spinner) have the ARIA "progressbar" role.
* Loader supports 3 sizes - small (s), medium (m) (Default) and large (l).
Use Spinner in components like Textfield and Button to show a loading state. For consistent user-experience, ensure the size of the Spinner and the component are same.
* Text field size XS = Spinner size XS
* Text field size S = Spinner size S
* Button size XS = Spinner size XS
`jsx
import { Textfield } from "@asphalt-react/textfield"
import { Spinner } from "@asphalt-react/loader"
``
Spinner support 6 sizes:
* extra small (xs)
* small (s)
* medium (m) (Default)
* large (l)
* extra large (xl)
* double extra large (xxl)
Spinner support 3 intents:
* neutral (Default)
* brand
* inverse
[comment]: #usage
[comment]: # "Loader Props"
Size of the Loader.
Accepts "s", "m" and "l" for small, medium & large respectively
| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |
[comment]: # "Spinner Props"
Size of the Spinner.
Accepts "xs", "s", "m", "l", "xl", "xxl".
| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |
Applies neutral intent.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
Applies brand intent.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |
Applies inverse intent.
| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |