Skeleton Component — Astro

Skeleton Component

A loading placeholder that shows a shimmer animation while content is loading. Uses role="status" and aria-label (default: "Loading") for screen readers. Respects prefers-reduced-motion.

Add this component

Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

bash bash Copy code

npx rizzo-css add

bash bash Copy code

pnpm dlx rizzo-css add

bash bash Copy code

npx rizzo-css add

bash bash Copy code

bunx rizzo-css add

Props

• variant (string, optional) - text, circle, rect, default (default: default)
• label (string, optional) - Accessible label for screen readers (default: "Loading")
• class (string, optional) - Additional CSS classes

Basic Usage

---
import Skeleton from '../components/astro/Skeleton.astro';
---

<Skeleton />

<!-- Rizzo CSS -->
<span class="skeleton" role="status" aria-label="Loading" aria-busy="true"></span>

<script>
  import { Skeleton } from '$lib/rizzo';
</script>

<Skeleton />

<script setup>
import Skeleton from '@/components/rizzo/Skeleton.vue';
</script>

<template>
  <Skeleton />
  <Skeleton class="skeleton--text" />
</template>

import { Skeleton } from './components/react';

<Skeleton />
<Skeleton variant="text" />

Variants

<Skeleton variant="text" />
<Skeleton variant="circle" />
<Skeleton variant="rect" />

Accessibility

• role="status" and aria-label so screen readers announce loading state
• Shimmer animation disabled when user prefers reduced motion

Other frameworks: Vanilla · Svelte · Vue · React