# EuiSkeletonComponent

**Type:** component



A skeleton loading component that provides various shapes and sizes for placeholder content.
Used to indicate loading states in the UI with different geometric shapes.

### Basic Usage
```html
<!-- Circle skeleton -->
<eui-skeleton [circle]="true" euiSizeM />

<!-- Line skeleton -->
<eui-skeleton [line]="true" euiSizeL />

<!-- Rectangle skeleton -->
<eui-skeleton [rectangle]="true" euiSizeXL />
```

### Accessibility
- Use `aria-busy="true"` on parent container while loading
- Provide `aria-live="polite"` region for content updates
- Consider adding visually hidden text describing loading state

### Notes
- Only one shape should be active at a time (circle, line, square, or rectangle)
- Combine with size variants (euiSizeXS, euiSizeS, euiSizeM, euiSizeL, euiSizeXL) for different dimensions
- Use euiRounded for rounded corners on rectangle/square shapes


**Selector:** `eui-skeleton`

## Inputs
- **circle**: `undefined` - When true, renders the skeleton as a circle shape
- **line**: `undefined` - When true, renders the skeleton as a line shape
- **rectangle**: `undefined` - When true, renders the skeleton as a rectangle shape
- **square**: `undefined` - When true, renders the skeleton as a square shape
- **euiSizeXS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeS**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeM**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeXL**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiRounded**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSizeVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]