Loading State

A centered loading indicator with spinner and message, commonly used while data is being fetched.

Default

Custom Message

Set a custom loading message with the message prop.

Custom Message

Fetching your data...

Without Card

Use wrap_card=false for an inline loading state without the card wrapper.

Without Card

Spinner Sizes

Control the spinner size with the spinner_size prop. Options are sm, default, lg, and xl.

Spinner Sizes

Small

Default

Large

Extra Large

    <.loading_state wrap_card={false} spinner_size="sm" message="Small" />
<.loading_state wrap_card={false} spinner_size="default" message="Default" />
<.loading_state wrap_card={false} spinner_size="lg" message="Large" />
<.loading_state wrap_card={false} spinner_size="xl" message="Extra Large" />
  

Inline Usage

Combine props for compact inline loading indicators.

Inline Usage

Saving changes