Gå til hovedinnhold
KOMPONENTER

Loader

npmv0.4.55

Loader er en visuell tilbakemelding som indikerer at lasting av innhold og data er i prosess.

npm install @entur/loader
@import '@entur/loader/dist/styles.css';

Komponenter

Loader

import { Loader } from '@entur/loader';
NavnTypeDefault-verdiBeskrivelse
children?ReactNode

Tekst som beskriver prosessen

className?string

Ekstra klassenavn

progress?number | "indeterminate" 'indeterminate'

Tall mellom 0-100, eller “indeterminate” om man ikke vet

Retningslinjer for bruk

Loader:

Loader er en visuell tilbakemelding som indikerer at lasting av innhold og data er i prosess. Denne komponenten brukes som en global loader for innhold som lastes inn på en hel side, innhold i en modal eller i en arbeidsflyt der neste trinn lastes inn.

Brukerne våre forventer at man kan raskt utføre oppgaver eller se informasjon, men noen ganger tar det litt tid. Derfor er det viktig å vise en laste indikator, for å varsle og forsikre brukerne om at systemet fungerer og handlingene deres blir behandlet, men systemet trenger tid på å hente inn data, vise informasjon eller fullføre enn oppgave. En beskjed som beskriverer lasteelementets tilstand bør inkluderes, f.eks ‘Laster inn’, ‘Behandler’, ‘Aktiverer’, ‘Lagrer’ etc.

Progressbar:

Progressbar viser fremdriftsstatusen til en handling eller prosess. Brukes for å gi brukerne beskjed om at en prosess er i gang, og eventuelt hvor lang tid denne prosessen tar eller har kommet. Bruk en progessbar for eksempel til: opplasting, nedlasting, importering av filer/dokumenter eller eksportere en rapport.

Ved filopplastning kan du sende inn et tall til progress-propen - du vil da få en ramme rundt loading-indikatoren.

Hvis du ikke spesifiserer en progress-prop, defaulter den til "indeterminate" - det vil si at den viser en vente-animasjon for å vise brukeren at siden er opptatt med å hente data, kalkulere priser osv.

Du kan sende inn en tekstlig beskrivelse som children, som gir brukeren en indikasjon på hva som skjer. Dette bør være i størrelsesorden 1-2 ord.

Rediger denne siden på Bitbucket