Inner Loading #
You can handle the loading state of the wrapped component by using the va-inner-loading component.
Examples #
Basic usage #
By default wrap a component in va-inner-loading with a loading property.
Color #
You can change the color of the icon.
Size #
Supports the ability to resize the icon.
Icon #
You can change the loading icon.
Accessibility #
The component has the aria-live="polite" and aria-busy attributes. It blocks any interaction with the content until the loading state is disabled.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| color | Color of the component (theme string or |
| - |
| icon | Sets an icon. |
|
|
| loading | Indicates that something is loading (spinner icon). |
|
|
| preset | Named preset combination of component props. |
| - |
| size | Specify size for component. |
|
|
Slots #
| Name | Description |
|---|---|
default | Slot for the component to which you want to apply loading styles |
Css Variables #
| Name | Default Value |
|---|---|
| --va-inner-loading-position | relative |
| --va-inner-loading-min-width | fit-content |
| --va-inner-loading-width | 100% |
| --va-inner-loading-overlay-display | flex |
| --va-inner-loading-overlay-align-items | center |
| --va-inner-loading-overlay-justify-content | center |
| --va-inner-loading-overlay-position | absolute |
| --va-inner-loading-overlay-top | 0 |
| --va-inner-loading-overlay-bottom | 0 |
| --va-inner-loading-overlay-width | 100% |
| --va-inner-loading-overlay-background | var(--va-background-primary) |