Skeleton

Loading placeholder elements with a shimmer animation.

Preview

Usage

<!-- Circle (avatar placeholder) -->
<div class="glass-skeleton circle" style="width: 48px; height: 48px;"></div>

<!-- Text lines -->
<div class="glass-skeleton text-line"></div>
<div class="glass-skeleton text-line"></div>

<!-- Rectangle block -->
<div class="glass-skeleton rect"></div>

Variants

Modifier	Description
`.circle`	`border-radius: 50%` for avatar placeholders
`.rect`	Fixed `height: 100px` for image/block placeholders
`.text-line`	`height: 0.85rem` with `0.5rem` bottom margin; last child is 60% width

Animation

The skeleton uses a shimmer animation (glass-shimmer-skeleton) that slides a semi-transparent gradient from left to right on a 1.8s infinite loop.

CSS Details

Property	Value
Background	`rgba(0,0,0,0.04)` (dark: `rgba(255,255,255,0.03)`)
Border	`1px solid var(--glass-border)`
Border Radius	`var(--glass-radius-sm)` (8px)
Width	`100%`
Min Height	`1rem`
Overflow	`hidden` (clips the shimmer animation)

Compatible Modifiers

.thin / .thick — material weight