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
Name Type Default Required Bindable Description
size 'sm' | 'md' | 'lg' 'md'
label text 'Loading'