Components

Loading

A loading component that displays a spinner with animated loading text to indicate background activity.

LoadingScreen

Component

View code

Show playground

Props

Props	Default	Type
`isLoading`	`true`	`boolean`
`text`	`'Loading'`	`string`
`spinnerSize`	`LoadingSpinnerSize.LG`	`LoadingSpinnerSize`
`spinnerClass`	—	`string`

Usage

isLoading

Sets the loading state to true or false.

 <template>
    <Loading :isLoading="true" />
</template>

Type: boolean
Default: true

text

Sets the text to be displayed in the loading state. Do not add ellpisis (...) or any other characters since it is already included in the component.

In the event of using only the spinner, do not use this component, use the Spinner component instead.

 <template>
    <Loading text="Loading" />
</template>

Type: string
Default: 'Loading'

spinnerSize

Controls sizing via LoadingSpinnerSize enum.

 <template>
    <Loading :spinnerSize="LoadingSpinnerSize.XL" />
</template>

Options

Value	Description
`XS`	xs
`SM`	sm
`MD`	md
`LG`	lg
`XL`	xl
`XXL`	2xl
`XXXL`	3xl

spinnerClass

Sets the class to be applied to the spinner.

 <template>
    <Loading spinnerClass="w-[32px] h-[32px]" />
</template>

Type: string