Skeleton

An animated placeholder that indicates content is loading. Use to prevent layout shift while data loads.

ARIA: aria-busy="true"Non-interactive
skeleton.rs
use stratum_leptos::*;

view! {
    // Avatar + text skeleton
    <Stack direction=Direction::Horizontal gap=3>
        <Skeleton class="h-12 w-12 rounded-full" />
        <Stack gap=2>
            <Skeleton class="h-4 w-[200px]" />
            <Skeleton class="h-4 w-[140px]" />
        </Stack>
    </Stack>
}

Installation

stratum add skeleton

Props

PropTypeDefaultDescription
classOption<String>NoneCSS classes for width, height, and shape

Accessibility

  • Renders with aria-busy="true" to indicate loading state.
  • Uses CSS animation: pulse for the shimmer effect.

Source

Styled: skeleton.rs