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) |