Feedback

Skeleton

Decorative placeholder block that reserves layout space while real content loads.

import { Skeleton } from '@lostgradient/cinder/skeleton';
feedbackloading
01

Overview

Animated placeholder shape that fills content areas while data is loading.

Usage

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

<Skeleton />
Live preview
02

When to use

Use when
  • Reserving the rough shape of incoming content during an initial fetch to avoid layout shift.
  • Indicating progressive load of cards, rows, or media tiles where the final shape is known.
Avoid when
  • Indicating indeterminate background work without a known target shape — use spinner.
  • Communicating that a view has no data at all — use empty-state.
03

Examples

Skeleton placeholders

Animated loading placeholders for text and avatars.

04

Props

Props for skeleton
Name Type Default Required Bindable Description
width text CSS width value applied as an inline style on the skeleton block (e.g. '200px', '100%').
height text CSS height value applied as an inline style on the skeleton block (e.g. '1rem', '48px').
radius text CSS border-radius value applied as an inline style, overriding the default pill shape (e.g. '4px', '50%').