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.
Open in GitHub

Color
#

You can change the color of the icon.

Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Open in GitHub

Size
#

Supports the ability to resize the icon.

Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Open in GitHub

Icon
#

You can change the loading icon.

Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Open in GitHub

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 #

NameDescriptionTypesDefault
color

String

-

icon

String

"autorenew"

loading

Boolean

false

preset

String

-

size

Number

30

Slots #

NameDescription

default

Slot for the component to which you want to apply loading styles

Css Variables #

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