Skeleton

Grå former som viser hvor innholdet kommer. De er alltid skjult for skjermlesere, så ventingen må meldes ett sted i tillegg. Er det ingen form å vise, eller tar ventingen kort tid, er Spinner enklere.

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/skeleton.css"

Former

Eksempel

Kode

<div class="fs-skeleton" data-variant="circle" aria-hidden="true"></div>
<div class="fs-skeleton" data-variant="text" aria-hidden="true"></div>
<div class="fs-skeleton sak-siste-linje" data-variant="text" aria-hidden="true"></div>
<div class="fs-skeleton sak-bilde" aria-hidden="true"></div>

data-variant	Brukes til
(utelatt)	Blokk, for bilder og kort
text	Én tekstlinje
circle	Profilbilde

Formene fyller bredden de får. sak-siste-linje og sak-bilde over er dine egne klasser, og de to reglene er alt som skal til:

.sak-siste-linje {
  inline-size: 70%;
}

.sak-bilde {
  --fs-skeleton-height: var(--size-12);
}

Sett bredden på den siste linjen til under 100 prosent. Et avsnitt der alle linjene er like lange ser ikke ut som tekst.

Ventingen må meldes ett sted

<div id="innhold" aria-busy="true">
  <p class="fs-sr-only" role="status">Henter søknadene dine</p>
  <div class="fs-skeleton" data-variant="text" aria-hidden="true"></div>
  <div class="fs-skeleton" data-variant="text" aria-hidden="true"></div>
</div>

En rekke tomme bokser som leses opp er verre enn stillhet. Derfor setter fs.skeleton() alltid aria-hidden="true", og beskjeden legges i et eget felt med role="status".

Når innholdet kommer, fjern aria-busy og tøm statusfeltet.

TypeScript

import { fs } from "@fristil/designsystem"

const linje = document.createElement("div")

fs.setAttributes(linje, fs.skeleton({ variant: "text" }))

Klasser du kan style

Klasse	Hva det er
.fs-skeleton	Plassholderen. Formen kommer fra data-variant.

Variabel	Standard
--fs-skeleton-height	var(--size-4)
--fs-skeleton-radius	var(--size-1)

Skimmeret er en gradient som beveger seg over flaten, ikke en gjennomsiktighet som pulserer, så kontrasten mot sideflaten er den samme hele veien. Har brukeren bedt om mindre bevegelse, står flaten stille.

Se Tilpasning for hvordan variablene og laget virker.

Tilgjengelighet

• Formene skal ligne på det som kommer. En plassholder som er tre linjer der resultatet er tjue, gjør siden urolig når innholdet lander.
• Vent litt før du viser dem, som med en venteindikator. Et glimt av grå bokser er mer forstyrrende enn en kort pause.
• Ikke la dem bli stående hvis noe feiler. Da venter brukeren på noe som aldri kommer. Bytt til en Alert med hva som gikk galt.