Designsystemoversikt

Loader

Loader viser at systemet jobber videre og bør alltid brukes sammen med tydelig status- eller konteksttekst.

Jøkul · Komponenter

Pakke: @fremtind/jokul

Installasjon: Se relevant guide

Loader er Jøkul sin visuelle indikator for pågående arbeid. Bruk den når brukeren må vente på at systemet henter eller sender data, men bare når tilstanden ikke kan beskrives bedre med konkret fremdrift.

Siden Jøkul nå leveres via monopakka `@fremtind/jokul`, dokumenterer props-tabellene markupkontrakten: klassemodifikatorer, HTML-attributter og ARIA som styrer hvordan loaderen brukes.

Playgrounden under lar deg styre hele den dokumenterte kontrakten direkte og viser både oppdatert forhåndsvisning og HTML-kode.

Eksempel

Props

    • variant="large" · textDescription="Laster inn oversikten" · inline=false · delay=0ms · role="status" · aria-live="polite"

    Laster inn oversikten

    Laster inn oversikten

    Kode

    React · tsx
    import "@fremtind/jokul/styles/core/core.css";
import "@fremtind/jokul/styles/components/loader/loader.min.css";
import { Loader } from "@fremtind/jokul/loader";

export function Example() {
    return (
        <Loader
            textDescription="Laster inn oversikten"
            role="status"
        />
    );
}

    Props

    Jøkul-props

    Offentlige Loader-props som styrer variant, statusmelding, plassering og forsinket visning.

    Prop Type Standard Beskrivelse
    variant "large" | "medium" | "small" "large" Styrer loaderens størrelse gjennom Jøkul sin variantkontrakt.
    textDescription string påkrevd Tekstlig status som skjermlesere kan annonsere mens loaderen vises.
    inline boolean false Legg til `jkl-loader--inline` når loaderen skal flyte med tekst eller andre inline-elementer.
    delay number 0 Venter et gitt antall millisekunder før loaderen rendres, slik at korte operasjoner slipper unødvendig flimring.

    React-props

    React-spesifikke props rundt wrapper, testkroker og lokal integrasjon.

    Prop Type Standard Beskrivelse
    className string ingen Ekstra klasse på wrapperen når loaderen må kobles til lokal layout eller sporing.
    dataTestAutoId string ingen Test-id for Jøkul sin React-komponent når du trenger en stabil hook i automatiserte tester.

    Native HTML-props

    Native HTML-attributter som brukes rundt loaderen når den skal annonsere status.

    Prop Type Standard Beskrivelse
    role "status" | utelatt "status" Bruk `role="status"` når loaderen skal annonsere oppdateringer i en live region.

    ARIA-props

    Tilgjengelighetsattributter som gjør loaderen begripelig for skjermlesere.

    Prop Type Standard Beskrivelse
    aria-live "polite" | "assertive" | "off" "polite" Angir hvor påtrengende statusoppdateringen skal annonseres når loaderen brukes i en live region.
    aria-hidden "true" "true" Skjul selve animasjonen fra skjermlesere og la den tekstlige statusen formidle hva som skjer.

    Når du skal bruke Loader

    Bruk Loader når systemet jobber videre, men brukeren ikke får en mer presis fremdriftsindikator som prosent, steg eller skjelettvisning.

    Velg heller skjelettvisning når strukturen er kjent og du vil beholde sideoppsettet mens innholdet lastes inn.

    Tilgjengelighet

    Loaderen alene formidler ikke nok informasjon for skjermlesere. Kombiner derfor alltid animasjonen med status- eller hjelpetekst.

    Når området oppdateres dynamisk, bør statusen bo i et område med `role="status"` eller tilsvarende live-region.

    CSS-klasser

    Loaderen styres via en liten klassekontrakt for størrelse og plassering.

    KlasseFormål
    .jkl-loaderBasisklassen for loader-markupen.
    .jkl-loader--inlineBrukes når loaderen skal flyte med tekst eller andre inline-elementer.
    .jkl-loader--mediumGir en tydelig mellomstor variant som passer i egne statusområder.
    .jkl-loader--smallKompakt variant for trange områder.
    .jkl-loader__dotAnimerte prikker som bygger selve loaderen.

    Komponentprofil

    Klient-JS
    Ingen
    Hydrering
    Ingen
    Ikoner
    Ingen
    Dekket API-props
    7
    Playground-kontroller
    6
    Delkomponenter
    0
    Anatomideler
    0
    Komposisjoner
    0
    Utfasete props
    0

    Stiler

    • @fremtind/jokul/styles/core/core.css
    • @fremtind/jokul/styles/components/loader/loader.min.css

    Ikonkontrakt

    Bruk: Ingen

    Komponenten krever ingen egen ikonkontrakt i grunnoppsettet.

    Propkontrakt

    Dekning: Komplett

    Scope: Pakkens offentlige props, uten generiske DOM-props

    • Loader · LoaderProps · @fremtind/jokul/loader · 7 props
    • Dekningen følger offentlige props som kommer fra Jøkul-pakken og dens egne basetyper, men ikke generiske DOM-props fra React.

    Tilgjengelighet

    Tastatur: Ingen egen tastaturmodell; loaderen er ikke en interaktiv kontroll.

    Semantikk som kreves

    • Selve animasjonen må skjules med aria-hidden="true".
    • Kombiner loaderen med status- eller hjelpetekst, eventuelt en live region.
    • Bruk ikke loaderen som eneste signal om hva som skjer.

    Automatiserte kontroller

    • Dokssiden inngår i prosjektets route smoke og a11y-kjøring.
    • Forhåndsvisningen rendres server-side uten Astro islands eller klienthydrering.

    Manuelle kontroller

    • Bekreft at statusmeldingen oppdateres eller forsvinner når arbeidet er ferdig.
    • Bekreft at lange ventetider får mer konkret fremdrift eller forklaring.

    Ytelse

    • Komponenten er bare CSS-animasjon i docs og trenger ikke klient-JS.
    • Vis loaderen bare mens arbeid faktisk pågår for å unngå unødvendig bevegelse.

    Relatert