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.

<Spinner />

Laddar, vänligen vänta.

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

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

Varianter

Fristående spinner

<Spinner />

Laddar, vänligen vänta.

Kombinerad med andra komponenter

Använd varianten small för att kombinera med andra komponenter t.ex. Button, notera hur attributet isOnColor används för den primära knappen.

<Button>
  <Spinner
    small
    isOnColor
  />
  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.

För val av laddningsindikator se Mönster för laddningsindikatorer

API

Name	Type	Default	Description
small	boolean	false	Displays a smaller spinner when set to true
isOnColor	boolean	false	For use on coloured background
dark	boolean	false	For use on dark background @deprecated please use isOnColor instead