- Accordion
- Alert
- Breadcrumbs
- Button
- Card
- Checkbox
- CheckboxGroup
- Chips
- DatePicker
- DescriptionList
- ErrorMessage
- ErrorSummary
- Fieldset
- FileUploader
- Footer
- Icon
- IconButton
- InlineButton
- Link
- LinkGroup
- MegaButton
- Modal
- NavigationTile
- OpenClose
- Pagination
- Panel
- Popover
- RadioGroup
- RolePicker
- ScrollToTopButton
- SearchField
- Select
- Spinner
- StepList
- Table
- Tabs
- Tag
- TextArea
- TextField
- TopBannerExternal
- TopBannerInternal
- Typografi
- Versjonshistorikk
Spinner
Pakke: ds-status
Spinner brukes som en visuell animert indikasjon på at noe laster. Komponenten brukes alene eller med en forklarende kort tekst som forteller brukeren at systemet jobber.
Eksempler
Egnet til:
- tilfeller der det normalt tar fra ett til ti sekunder for å laste et innhold
Uegnet til:
- lasting som tar mindre enn ett sekund
- situasjoner der brukeren må vente i lang tid
- å bruke flere om gangen
Teknisk dokumentasjon
Se Spinner i Storybook for tekniske detaljer.
Varianter
Spinner har tre størrelser og kommer i tre farger. I tillegg har den også mulighet for tekst som informerer brukeren om at systemet jobber eller om hva som lastes.
Interaktiv
Spinneren kan ha blå farge (interaktiv). Eksempelet viser liten størrelse.
Svart
Spinneren kan ha svart farge. Eksempelet viser medium størrelse.
Mørk modus
Spinneren kan ha hvit farge. Eksempelet viser spinner med forklarende tekst under.
Spinner med forklarende tekst
Forklarende tekst kan ligge under spinneren for lengre tekst, eller ved siden av for kort tekst.
Hvordan bruke komponenten
- Bruk bare en spinner om gangen.
- Forklar ut fra kontekst hvorfor brukeren må vente.
- Ikke bruk spinner dersom det bare er et hundredels sekund venting.
Plassering av spinneren
Plasser spinneren i nærhet til brukerens siste interaksjon.
Når en større seksjon laster, kan spinneren vises under.
Universell utforming
- Bruk bare spinner når du har en handling eller oppgave med innlasting.
- Spinneren skal ha et tekstalternativ for skjermlesere.