# Skeleton · MIAN

Loading placeholders shaped like the content that is coming.

- Id: `skeleton` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/skeleton
- Use for: loading placeholder, content loading, shimmer.
- Alternatives: loader, spinner.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Card loading

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/skeleton/source