component

Loading

props · 15 shown · 15 total

State

  • boolean
    default false (true without children)

    When true, renders children as a shimmering skeleton. Without children, whether the standalone spinner shows — left unset, it does (`<Loading />`), so `<Loading loading={pending} />` spins only while pending.

  • number

    Known progress, 0–100. The indicator's spinner becomes a ring (or bar) that fills to it, and `inline` / `overlay` show the percentage. Leave unset while the progress is unknown.

Appearance

  • string
    default neutral

    Tints the skeleton shimmer using any palette token.

  • boolean "corner" "bar" "overlay" "inline"
    default "overlay" for busy, none for skeleton

    Where the loading indicator sits: `corner`, `bar`, `overlay` or `inline` (for buttons). `true` means `corner`; `false` shows none. Busy content doesn't move, so `busy` shows the `overlay` indicator unless told otherwise.

  • radius deprecated
    "sm" "md" "pill"
    default "sm"

    No effect. It used to round the skeleton text bars; they are now drawn as text decorations, which always have square ends. Shapes keep their own component's radius.

  • "sm" "md" "xs" "lg"
    default "sm"

    Spinner size when Loading renders without children (a standalone spinner) — e.g. a list's "loading more" row.

  • "skeleton" "busy"
    default "skeleton"

    Loading treatment. `skeleton` stands in for content that isn't there yet with its pulsing shape; `busy` leaves loaded content exactly as it is (inert) and lets the `indicator` say it's working.

Behavior

  • number
    default 300 for busy, 0 for skeleton

    Milliseconds `loading` must stay true before anything is shown. Most actions finish sooner, and a flash of loading UI is worse than none.

  • number
    default 500 for busy, 0 for skeleton

    Once shown, the loading state stays at least this many milliseconds, so it never flickers on and off.

  • boolean
    default false

    Serialize the loading config into the rendered HTML so `updateLoadingElement()` can change `loading`/`variant`/`speed`/`progress` at runtime (honouring `delay` / `minDuration`). Meant for Astro / vanilla JS, where props don't re-render; reactive frameworks don't need it. The indicator is always rendered (hidden while not loading) so it can be shown later.

  • "slow" "normal" "fast"
    default "normal"

    Skeleton pulse cycle length: `slow` 3s, `normal` 2s, `fast` 1.5s.

Accessibility

  • string
    default "Loading"

    Accessible name of the loading state. Announced through a polite status region when loading starts (and as known progress passes each quarter), used as the spinner's label, and shown as the `overlay` message. Pass a translated string for non-English UIs.

Slots

  • children slot svelte
    Snippet

    Default content.

Advanced

  • element binding svelte
    HTMLDivElement null

    Bound reference to the root element (`bind:this`).

  • LoadingPassThrough

    Per-slot style and attribute override bag for customizing the loading root element's styles or HTML attributes.

Plus all standard <div> HTML attributes.

Type

  • Components
  • Blocks