Open experiment
Constellation skeleton loader
A distinctive loading placeholder that communicates the expected avatar, title, metadata, and body structure. Star nodes connect across the surface while a subtle shimmer passes through, then freezes for reduced-motion users.
Lab tested Responsive Dark mode
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<article class="cmp-constellation-skeleton" aria-label="Loading profile card" aria-busy="true">
<span class="cmp-constellation-skeleton__avatar" aria-hidden="true"></span>
<div class="cmp-constellation-skeleton__copy" aria-hidden="true"><i></i><i></i></div>
<div class="cmp-constellation-skeleton__body" aria-hidden="true"><i></i><i></i><i></i></div>
<span class="cmp-constellation-skeleton__stars" aria-hidden="true"
><b></b><b></b><b></b><b></b
></span>
</article>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- The container exposes a concise loading label and aria-busy state.
- All placeholder geometry is decorative.
- Reduced motion removes the shimmer animation.
License: MIT License for open-source use, modification, and distribution.