<lm-skeleton> – Skjelettplassholder / Skeleton

Om komponenten

Kanonisk navn: <lm-skeleton>
Synonymer: skeleton, loading placeholder, plassholder, lasteplassholder, shimmer
Kategori: tilbakemelding
ARIA-mønster: Ikke aktuelt - Ren, dekorativ loading-plassholder uten eget APG-widgetmønster. Skjermleserstøtte håndteres av beholderen rundt komponenten, typisk med aria-busy eller en egen statusmelding.
Parts: skeleton, line, shape, thumbnail, lines
Native-first-vurdering: HTML har ingen native skeleton-primitiv. Komponenten tilfører bare en delt, dekorativ plassholder og erstatter ikke semantisk innhold eller ARIA-status på egen hånd.
Nettleserstøtte: Ingen spesielle forbehold - kun bredt støttede, stabile plattform-API-er og vanlige CSS-animasjoner.
Design-tokens: var(--space-small, ...), var(--radius-small, ...), var(--color-surface-muted, ...), var(--color-surface, ...)
Sist endret: 20. september 2026
Brukt: 1 sted

Formål

Viser en nøytral, animerbar plassholder mens ekte innhold lastes eller beregnes. Komponenten dekker et reelt UI-gap mellom en ren spinner og den endelige layouten: brukeren får se hvor innholdet kommer til å ligge, uten at siden hopper når dataene blir klare.

Egner seg for

Lister, kort og detaljpaneler der layouten er kjent, men innholdet ennå ikke er lastet.
Steder der en kortvarig, visuell plassholder oppleves roligere enn å vise en spinner alene.

Egner seg ikke for

Langvarige eller uklare prosesser der brukeren trenger eksplisitt status eller fremdrift - bruk <lm-progress-bar> eller en tekstlig melding i stedet.
Situasjoner der det reelle innholdet allerede er tilgjengelig, men bare er skjult - da er en vanlig overgang ofte mer riktig enn en egen loading-plassholder.

Bruk

Bruk komponenten som rent visuelt lag mens en overordnet region står i aria-busy. Bytt den ut med ekte innhold så snart dataene er klare.

<script type="module" src="/designsystem/komponenter/tilbakemelding/skeleton/skeleton.js"></script>

<section aria-busy="true" aria-live="polite">
    <lm-skeleton variant="card"></lm-skeleton>
</section>

<lm-skeleton variant="text" lines="4"></lm-skeleton>
<lm-skeleton variant="circle" size="small"></lm-skeleton>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`variant`	`"text" \| "card" \| "rectangle" \| "circle"`	"text"	Attributt/property. Velger hvilken type plassholder som rendres.
`lines`	`number`	3	Attributt/property. Antall tekstlinjer i `variant="text"`. Ignoreres av de andre variantene.
`size`	`"small" \| "large"`		Attributt. Grov størrelsesvariant for sirkel-, rektangel- og kort-plassholderne.

Parts

Part	Beskrivelse
`skeleton`	Den omsluttende beholderen for den aktive plassholdervarianten.
`line`	Hver enkelt tekstlinje i tekst- og kort-variantene.
`shape`	Den enkle sirkel- eller rektangelflaten i de tilsvarende variantene.
`thumbnail`	Kortvariantens større toppflate.
`lines`	Kortvariantens beholder for tekstlinjene.

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-skeleton::part(skeleton) {
    /* egne stiler for "Den omsluttende beholderen for den aktive plassholdervarianten." */
}

lm-skeleton::part(line) {
    /* egne stiler for "Hver enkelt tekstlinje i tekst- og kort-variantene." */
}

lm-skeleton::part(shape) {
    /* egne stiler for "Den enkle sirkel- eller rektangelflaten i de tilsvarende variantene." */
}

lm-skeleton::part(thumbnail) {
    /* egne stiler for "Kortvariantens større toppflate." */
}

lm-skeleton::part(lines) {
    /* egne stiler for "Kortvariantens beholder for tekstlinjene." */
}

Tilgjengelighet

Komponenten er alltid aria-hidden, slik at skjermlesere ikke leser opp meningsløse plassholderlinjer. Sett aria-busy="true" på området som laster, og gi eventuelt en separat tekstlig status ved behov. prefers-reduced-motion: reduce slår av shimmer-animasjonen.

Komponenten er alltid aria-hidden, slik at skjermlesere ikke får støyende, meningsløst plassholderinnhold lest opp.
Tilgjengelig status bør komme fra området rundt, for eksempel aria-busy="true" eller en separat tekstlig statusmelding.
prefers-reduced-motion: reduce fjerner shimmer-animasjonen helt.

Detaljer

variant="card" gir en praktisk standard for kort-lignende lastetilstander med en stor toppflate og tre tekstlinjer under.
Komponenten prøver bevisst ikke å gjette høyde/bredde fra innholdet den erstatter; den gir bare et lite sett med generiske former som holder markupen enkel.

Referanser

Se også:

../progress-bar/index.html - brukes når brukeren trenger faktisk fremdriftsstatus i stedet for en ren plassholder.
../../innhold/empty-state/index.html - brukes når det ikke finnes innhold i det hele tatt, ikke bare mens det lastes.

Brukes av:

Ingen ennå - ny komponent.

Avhengigheter: Ingen