API reference
Skeleton exposes a small wrapper contract: CSS size inputs for block dimensions plus toggles for shimmer motion and corner radius.
Wrapper component
tng-skeleton renders the loading block for you, applies the default shimmer shell, and forwards the primitive state hooks underneath.
Wrapper usage
html
<tng-skeleton width="75%" height="1rem"></tng-skeleton>
<tng-skeleton width="100%" height="7rem" [rounded]="false"></tng-skeleton>
<tng-skeleton width="12rem" height="2.25rem" [animated]="false"></tng-skeleton>
Sizing and state inputs
Use CSS size strings for layout and boolean toggles to adjust the default shell without replacing the wrapper.
| Input | Type | Default | Notes |
|---|---|---|---|
width | string | '100%' | Applied inline to the rendered block. Empty strings fall back to 100%. |
height | string | '1rem' | Applied inline to the rendered block. Empty strings fall back to 1rem. |
animated | boolean | true | Toggles the shimmer motion hook through data-animated. |
rounded | boolean | true | Toggles the wrapper radius hook through data-rounded. |
Primitive foundation
Under the hood, the wrapper uses tngSkeleton for the decorative semantics and slot and state attributes. Reach for the headless page when you want to own the element markup directly.
Primitive foundation
html
<div tngSkeleton class="skeleton-line"></div>
<div tngSkeleton [animated]="false" [rounded]="false" class="skeleton-block"></div>