Feedback
Skeleton
A placeholder that keeps the layout while content loads.
Examples
Anatomy
Skeleton anatomy| # | Part | Description | Presence |
|---|
| 1 | Line | 6px radius | Required |
|---|
| 2 | Block | 12px radius | Required |
|---|
| 3 | Circle | For avatars | Optional |
|---|
Specifications
| Line radius | 6px |
|---|
| Block radius | 12px |
|---|
Interaction
Keyboard| Key | Result |
|---|
| None | Not focusable |
|---|
Pointer and touch| Trigger | Response |
|---|
| Loop | Shimmer 1.4s, stops with reduced motion |
|---|
Accessibility
role · busy region
2.2.2Pause, Stop, Hide4.1.3Status Messages
Requirements| Requirement | How Rig meets it |
|---|
| State | aria-busy="true" on the region, shapes aria-hidden |
|---|
| Announcement | A single sr-only “Loading profile” in a role="status" |
|---|
| Layout | Match final dimensions to avoid shift |
|---|
| Reduced motion | Static placeholder |
|---|
Usage
Do and don’t| Do | Don’t |
|---|
| ✓Use for loads over 300ms | ✕Do not show skeletons for under 300ms |
| ✓ | ✕Do not leave them forever: show an error after a timeout |
Notes from the Figma file
- Match the final layout so nothing shifts when content arrives.