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.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Color #
You can change the color of the icon.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Size #
Supports the ability to resize the icon.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Icon #
You can change the loading icon.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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 |
| - | |
| icon |
|
| |
| loading |
|
| |
| preset |
| - | |
| size |
|
|
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) |