Shimmer placeholder that holds the shape of content while it loads, in four shapes: text, title, rect and circle. The host itself is the shimmering block, so size it with width and height and lay it out like any element. Compose a region from several, or drop in sui-skeleton-card for the common card shape.
import { Component } from "@angular/core";
import { SuiSkeleton } from "@shineui/angular";
@Component({
standalone: true,
imports: [SuiSkeleton],
template: `<sui-skeleton shape="title"></sui-skeleton>`,
})
export class Example { }
Basic
A title line and two text lines. Every skeleton is aria-hidden, so a loading region announces nothing on its own: put aria-busy="true" on the container holding them and take it off when the real content lands.
Four shapes: text, title, rect and circle, each with its own default size. width and height take a CSS length or a bare number read as px, and a circle takes its height from its width.
sui-skeleton-card is the ready-made card: a circle avatar, a title and caption line, then three text lines in the card frame. It is aria-hidden like its parts, so the same aria-busy rule applies to the container.
animation="none" drops the shimmer and leaves the flat sunken block, so the placeholder keeps its shape and weight. A long list is the case for it, since a 40 by 5 table skeleton is 200 gradients repainting every frame; on sui-skeleton-card one value reaches all six parts.
The anatomy is composed, not configured: rows of sui-skeleton in the real table geometry. aria-busy on the region is what tells a screen reader anything is happening.
none drops the shimmer and leaves the flat sunken block. A long list is the case for it: a 40 x 5 table skeleton is 200 gradients repainting every frame.
height
height
number | string | undefined
CSS length or px number. Defaults per shape (circle follows width).
shape
shape
"circle" | "rect" | "text" | "title"
'text'
Placeholder shape and its default size: text a 12px line, title 17px at 45% width, rect an 84px block, circle 36px. Every shape is aria-hidden, so a loading region says nothing on its own; put aria-busy="true" on the container while it loads.
width
width
number | string | undefined
CSS length or px number. Defaults per shape.
<sui-skeleton-card>
Properties
Property
Attribute
Type
Default
Description
animation
animation
"none" | "wave"
'wave'
Passed to every part, so the whole card shimmers or none of it does; a card whose avatar shimmered over flat lines would read as half loaded. none stops the shimmer on a long list of cards; see sui-skeleton.
Theming
Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.