Komponenter
Spinner
Spinner brukes for å indikere at innhold eller en handling er i ferd med å laste, og at brukeren må vente før de kan fortsette.
React
Trykk Enter for å redigere
const Preview = () => { return <Spinner aria-label='Henter kaffi' />; }; render(<Preview />)
- aria-label
- Description
Accessibile label Defines a string value that labels the current element. @see aria-labelledby.
- Type
string
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | - | Accessibile label Defines a string value that labels the current element. @see aria-labelledby. |
Bruk
Eksempel
Størrelser
React
Trykk Enter for å redigere
const Sizes = () => { return ( <> <Spinner aria-label='Henter kaffi' data-size='2xs' /> <Spinner aria-label='Henter kaffi' data-size='xs' /> <Spinner aria-label='Henter kaffi' data-size='sm' /> <Spinner aria-label='Henter kaffi' data-size='md' /> <Spinner aria-label='Henter kaffi' data-size='lg' /> <Spinner aria-label='Henter kaffi' data-size='xl' /> </> ); }; render(<Sizes />)
HTML
Legg klassenavnet ds-spinner på ein <svg>-tagg for å lage ein spinner.
<svg>-en skal ha to <circle>-element inni seg for å lage spinneren.
Sjekk kodesnutten under for komplett HTML-struktur.
CSS variabler og data-attributter
| Navn | Verdi |
|---|---|
| --dsc-spinner-background | var(--ds-color-surface-tinted) |
| --dsc-spinner-stroke | var(--ds-color-border-default) |
| --dsc-spinner-animation-duration | 2s |
Ingen relevante data-attributter funnet.
Rediger denne siden på github.com (åpnes i ny fane)