Hoppa till huvudinnehåll

Skeleton

Laddningsindikator

Komponent som används som en platshållare för den riktiga komponenten innan sidan laddat klart

<Skeleton height='48px' />

Installation

npm install @midas-ds/components
import { Skeleton } from '@midas-ds/components'

Varianter

Rectangle

Detta är standardvarianten. Används som platshållare för text och de flesta komponenter vi har. Ange storleken i px, rem eller % med width och height. Om inget anges kommer den att fylla sin parent container.

<Skeleton height='48px' />

Circle

Används för cirkulära komponenter, tex avatar. Circle behöver bara width och sätter automatiskt höjden så att den blir rund.

<Skeleton
variant='circle'
width='48px'
/>

Animation

Skeleton är animerad som standard. Det går att stänga av med isAnimated={false}.

<Skeleton
height='48px'
isAnimated
/>

Riktlinjer

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

API

NameTypeDefaultDescription
width-

Use valid CSS length units

height-

Use valid CSS length units

variantrectangle

Circular or rectangular Skeleton component. When using circle, only width is allowed to control size.

isAnimatedtrue

Displays the skeleton component with a wave animation