Angular Skeleton is a placeholder to display instead of the actual content.
<h3 id="setup">Setup</h3>
Refer to PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import {SkeletonModule} from 'primeng/skeleton';
</code></pre>
<h3 id="getting-started">Getting Started</h3>
Skeleton displays a rectangle in its simplest form.
<pre><code class="lang-html">&lt;p-skeleton&gt;&lt;/p-skeleton&gt;
</code></pre>
<h3 id="circle">Circle</h3>
The other option is the circle by setting shape property as "circle".
<pre><code class="lang-html">&lt;p-skeleton shape="circle"&gt;&lt;/p-skeleton&gt;
</code></pre>
<h3 id="size">Size</h3>
In order to customize the size, use width and height properties for rectangles and size for Circle and Square shapes.
<pre><code class="lang-html">&lt;p-skeleton width="100%" height="2rem"&gt;&lt;/p-skeleton&gt;
&lt;p-skeleton shape="circle" size="50px"&gt;&lt;/p-skeleton&gt;
</code></pre>
<h3 id="border-radius">Border Radius</h3>
The default border radius of a rectangle is specified by the theme and can be overriden using the borderRadius property.
<pre><code class="lang-html">&lt;p-skeleton borderRadius="16px"&gt;&lt;/p-skeleton&gt;
</code></pre>
<h3 id="animation">Animation</h3>
Animation can be turned of by setting animation to "none".
<pre><code class="lang-html">&lt;p-skeleton animation="none"&gt;&lt;/p-skeleton&gt;
</code></pre>
<h3 id="theming">Theming</h3>
Skeleton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primeng/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/skeleton">Skeleton</a> showcase for demos and documentation.

Angular Skeleton is a placeholder to display instead of the actual content.

### Setup

Refer to PrimeNG [setup documentation](https://primefaces.org/primeng/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import {SkeletonModule} from 'primeng/skeleton';
```

### Getting Started

Skeleton displays a rectangle in its simplest form.

```html
<p-skeleton></p-skeleton>
```

### Circle

The other option is the circle by setting **shape** property as "circle".

```html
<p-skeleton shape="circle"></p-skeleton>
```

### Size

In order to customize the size, use **width** and **height** properties for rectangles and **size** for Circle and Square shapes.

```html
<p-skeleton width="100%" height="2rem"></p-skeleton>
<p-skeleton shape="circle" size="50px"></p-skeleton>
```

### Border Radius

The default border radius of a rectangle is specified by the theme and can be overriden using the **borderRadius** property.

```html
<p-skeleton borderRadius="16px"></p-skeleton>
```

### Animation

Animation can be turned of by setting **animation** to "none".

```html
<p-skeleton animation="none"></p-skeleton>
```

### Theming

Skeleton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primeng/showcase/#/theming) tool.

### Resources

Visit the PrimeNG [Skeleton](https://primefaces.org/primeng/showcase/#/skeleton) showcase for demos and documentation.