Feedback

Spinner

Compact role="status" indicator that communicates indeterminate background work with an accessible loading label.

import { Spinner } from '@lostgradient/cinder/spinner';
feedbackloading
01

Overview

A loading indicator with size variants and an accessible status label.

Usage

svelte 
<script lang="ts">
  import Spinner from '@lostgradient/cinder/spinner';
</script>

<Spinner size="md" label="Loading" />
Live preview
02

When to use

Use when
  • Showing that a short asynchronous action is in progress without a predictable completion time.
  • Indicating inline busy state next to a control while a request resolves.
Avoid when
  • Reserving layout space for content with a known final shape — use skeleton.
  • Reporting determinate progress with a measurable percentage — use progress.
03

Examples

Inline spinner

Spinner used inline alongside text.

Spinner sizes

Small, medium, and large loading spinners.

04

Props

Props for spinner
NameTypeDefaultDescription
size 'sm' | 'md' | 'lg' 'md'
label text 'Loading'