Skeleton
The shape of what is coming, so nothing jumps when it arrives. It never spins.
openvibe-shared/kitJSON
Build it
kit.skeleton({ kind: 'row', count: 3 })Props
kind- string?
count- number?
label- string?
Anatomy
- skeletonThe shape of what is coming, so nothing jumps when it arrives. It never spins.
Behaviour and access
- Keyboard
- Standard focus order
- Outside tap
- Leaves it open
- Scroll
- The page still scrolls
- Reduced motion
- Remove movement; keep the state change.
- Name
- Skeleton
- Target
- At least 44 × 44 px on touch
- Focus
- Visible keyboard focus; follow reading order
States
- default
- busy
Tokens
color.text.mutedcolor.status.bad.base
Android · Jetpack Compose
Material 3 Skeleton
Use Skeleton in Jetpack Compose with the shared tokens.
iOS · SwiftUI
Use Skeleton in SwiftUI with the shared tokens.
Markup
Default
<div class="ovk-skels ovk-skels-row" role="status" aria-busy="true" aria-label="Loading"><div class="ovk-skel-row"><span class="ovk-skel ovk-skel-avatar"></span><span class="ovk-skel-lines"><span class="ovk-skel ovk-skel-l1"></span><span class="ovk-skel ovk-skel-l2"></span></span></div><div class="ovk-skel-row"><span class="ovk-skel ovk-skel-avatar"></span><span class="ovk-skel-lines"><span class="ovk-skel ovk-skel-l1"></span><span class="ovk-skel ovk-skel-l2"></span></span></div><div class="ovk-skel-row"><span class="ovk-skel ovk-skel-avatar"></span><span class="ovk-skel-lines"><span class="ovk-skel ovk-skel-l1"></span><span class="ovk-skel ovk-skel-l2"></span></span></div></div>