Spinner

Laddningsindikator

Storybook

Komponent som används för att upplysa användaren om att systemet/tjänsten laddar eller jobbar på något i bakgrunden. Läs mer om hur spinner används i Mönster för laddningsindikatorer

import { Spinner } from '@midas-ds/components'

<Spinner/>

Loading, please wait...

Varianter

Storlek

Standardstorleken är helskärmsspinner. Använd varianten small när spinner ligger bredvid andra komponenter.

<Spinner small/>

Loading, please wait...

Färg

Spinnern ärver sin färg från textfärgen på det element den placeras i.

<Spinner/>

Loading, please wait...

Valfri färg

<Spinner color={variables.iconOnColor} small/>

Loading, please wait...

Knapp med spinner

För att visa en spinner i Button används property isPending på Button

<Button isPending>
  <Spinner small/>
  Laddar...
</Button>

Riktlinjer

Om det väntas ta mer än 10 sekunder att ladda sidan bör det förutom en spinner finnas ett meddelande till användaren om det.

API

Name	Type	Default	Description
small	boolean	false	Displays a smaller spinner when set to true
isOnColor	boolean	false	@deprecated since v14, define color based on context. Use color prop instead.
color	string	-	User defined color
className	string	-