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.

HTML

HTMLReact

Trykk Enter for å redigere

Unable to parse html

const Preview = () => {
  return <Spinner aria-label='Henter kaffi' />;
};

render(<Preview />)

Bruk

Legg klassenavnet ds-spinner på en <svg>-tagg for å lage en spinner. <svg>-en skal ha to <circle>-elementer inni seg for å lage spinneren.

Størrelser styres med data-size og farger med data-color. Komponenten vil arve nærmeste forelder med disse satt.

CSS-variabler
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.

import { Spinner } from "@digdir/designsystemet-react";
<Spinner aria-label="Laster" />;

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.