Skeleton
Loading placeholders shaped like the content that is coming.
Card loading
<div class="mn-card" style="max-width:22rem" aria-busy="true" aria-label="Loading">
<div class="mn-card-body" aria-hidden="true">
<div class="mn-row" style="flex-wrap:nowrap"><span class="mn-skeleton mn-skeleton-circle" style="width:2.5rem;height:2.5rem;flex:none"></span>
<div class="mn-stack mn-grow" style="--mn-gap:.5rem"><span class="mn-skeleton mn-skeleton-text" style="width:60%"></span><span class="mn-skeleton mn-skeleton-text" style="width:40%"></span></div></div>
<span class="mn-skeleton" style="height:8rem;margin-top:1rem"></span>
</div>
</div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/skeleton.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-skeleton | Block placeholder, size it with width/height. |
| mn-skeleton-text · mn-skeleton-circle | Line of text · circle. |
Accessibility
- Hide skeletons from assistive tech (aria-hidden) and set aria-busy="true" on the region that is loading. Shimmer stops under reduced motion.