Inline Loading — cinder playground

Overview

Inline async-action status indicator that transitions from loading to success or error with accessible announcements.

Usage

<script lang="ts">
  import InlineLoading from '@lostgradient/cinder/inline-loading';

  let status = $state<'inactive' | 'active' | 'finished' | 'error'>('inactive');
</script>

<InlineLoading {status} description="Saving changes" />

Live preview

When to use

Use when

Showing a compact Submit -> loading -> success/error lifecycle beside a button or form row.
Communicating short-lived async state transitions without reserving large layout space.

Avoid when

Showing indeterminate work without success/error transitions — use spinner.
Reporting static non-loading status in dense lists — use status-dot.

Examples

Inline loading lifecycle

Inline async action states: active, finished, and error.

Props

Props for inline-loading
Name	Type	Default	Bindable	Description
`status`	`'inactive' \| 'active' \| 'finished' \| 'error'`	`'inactive'`	bind	Lifecycle state for the inline async action indicator. Bindable: the component resets this to `"inactive"` after the `successDelay` timer fires so a subsequent `status = "finished"` from the parent is always a real value transition that re-shows the success indicator.
`description`	`text`			Visible status label rendered next to the indicator.
`iconDescription`	`text`			Accessible status wording used by announcements when no visible description is provided.
`successDelay`	`number`	`1500`		Delay in milliseconds before auto-resetting `finished` back to `inactive`.