Feedback

Skeleton

A placeholder in the shape of content that is still loading.

Features8

API

Theming

Shapes

A rectangle (any width and height) or a circle.

5 lines

<div class="row">  <tx-skeleton shape="circle" size="56px" />  <tx-skeleton width="140px" height="56px" />  <tx-skeleton width="56px" height="56px" borderRadius="14px" /></div>

Lines

lines draws a paragraph; the last line is shorter.

Card

Combine shapes into the layout of the real content — here a post card.

11 lines

<div class="card">  <div class="head">    <tx-skeleton shape="circle" size="40px" />    <div class="who">      <tx-skeleton width="120px" />      <tx-skeleton width="80px" height="10px" />    </div>  </div>  <tx-skeleton height="140px" borderRadius="12px" />  <tx-skeleton [lines]="2" /></div>

List

A list of people while it loads.

9 lines

<ul class="list">  @for (row of rows; track row) {    <li>      <tx-skeleton shape="circle" size="32px" />      <tx-skeleton [width]="row" />      <tx-skeleton width="56px" height="20px" borderRadius="999px" />    </li>  }</ul>

Table

tx-skeleton-table — rows, columns and a header while the data loads.

Loading

Swap the skeleton for the content when it arrives; mark the region aria-busy while loading.

Quarterly report

Revenue grew 18% over the last quarter, with most of the growth coming from new teams on the yearly plan.

15 lines

<div class="box" [attr.aria-busy]="loading()">  @if (loading()) {    <tx-skeleton width="50%" height="20px" />    <tx-skeleton [lines]="3" />  } @else {    <h4>Quarterly report</h4>    <p>      Revenue grew 18% over the last quarter, with most of the growth coming from new teams on      the yearly plan.    </p>  }</div><button txButton size="small" severity="secondary" [outlined]="true" (click)="reload()">  Reload</button>

No animation

animation="none" for still placeholders. The wave is always off with reduced motion.

Design tokens

[dt] changes the skeleton tokens — taller lines, wider gaps, a slower wave.