# EuiSkeletonComponent

**Type:** component

<p>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.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- Circle skeleton --&gt;
&lt;eui-skeleton [circle]=&quot;true&quot; euiSizeM /&gt;

&lt;!-- Line skeleton --&gt;
&lt;eui-skeleton [line]=&quot;true&quot; euiSizeL /&gt;

&lt;!-- Rectangle skeleton --&gt;
&lt;eui-skeleton [rectangle]=&quot;true&quot; euiSizeXL /&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use <code>aria-busy=&quot;true&quot;</code> on parent container while loading</li>
<li>Provide <code>aria-live=&quot;polite&quot;</code> region for content updates</li>
<li>Consider adding visually hidden text describing loading state</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Only one shape should be active at a time (circle, line, square, or rectangle)</li>
<li>Combine with size variants (euiSizeXS, euiSizeS, euiSizeM, euiSizeL, euiSizeXL) for different dimensions</li>
<li>Use euiRounded for rounded corners on rectangle/square shapes</li>
</ul>


**Selector:** `eui-skeleton`

**Standalone:** false

## Inputs

- **circle**: `undefined` - <p>When true, renders the skeleton as a circle shape</p>

- **line**: `undefined` - <p>When true, renders the skeleton as a line shape</p>

- **rectangle**: `undefined` - <p>When true, renders the skeleton as a rectangle shape</p>

- **square**: `undefined` - <p>When true, renders the skeleton as a square shape</p>

