Loading
Show when a request is in progress with a loading indicator on your controls.
spinnerinfinity
<x-loading/>
<x-loading variant="bars"/>
<x-loading variant="infinity"/>
Loading indicators are added by default on <x-button> as they are the most likely components to trigger a request being sent to the server; read the documentation to learn how to remove indicators.
#Colors
Colors are applicable to loading indicators.
spinner Neutral
spinner Primary
spinner Secondary
spinner Accent
spinner Info
spinner Success
spinner Warning
spinner Error
<x-loading color="neutral"/> Neutral
<x-loading color="primary"/> Primary
<x-loading color="secondary"/> Secondary
<x-loading color="accent"/> Accent
<x-loading color="info"/> Info
<x-loading color="success"/> Success
<x-loading color="warning"/> Warning
<x-loading color="error"/> Error
#Sizes
spinner Huge
spinner Large
spinner Medium
spinner Small
spinner Tiny
<x-loading size="xl"/> Huge
<x-loading size="lg"/> Large
<x-loading size="md"/> Medium
<x-loading size="sm"/> Small
<x-loading size="xs"/> Tiny
#Variants
The variant={spinner|dots|ring|ball|bars|infinity} attribute changes the appearance of the indicator.
spinner Spinner (default)
dots Dots
ring Ring
ball Ball
Bars
infinity Infinity
<x-loading variant="spinner"/> Spinner (default)
<x-loading variant="dots"/> Dots
<x-loading variant="ring"/> Ring
<x-loading variant="ball"/> Ball
<x-loading variant="bars"/> Bars
<x-loading variant="infinity"/> Infinity