Halstack

Design system

v6.0.0

Spinner

Ready

Loading spinner is a waiting indicator in the user interface to communicate users an ongoing proccess.

Specifications

Spinner design specifications

Spinner design specifications

Design tokens

Color

Component token	Element	Token	Value
`trackCircleColor`	Spinner circle (track)	`color-purple-700`	#5f249f
`trackCircleColorOverlay`	Spinner circle (track)	`color-purple-500`	#a46ede
`totalCircleColor`	Spinner circle (total)	`color-white`	#ffffff
`fontColor`	Label	`color-black`	#000000
`fontColorOnDark`	Label	`color-white`	#ffffff
`fontColor`	Percentage	`color-black`	#000000
`overlayColor`	Overlay	`color-grey-800-a`	#000000b3

Size

Property	Element	Token	Value
`width`	Spinner container (large)	-	140px
`height`	Spinner container (large)	-	140px
`width`	Spinner container (small)	-	16px
`height`	Spinner container (small)	-	16px
`max-width`	Overlay	-	100vw
`max-height`	Overlay	-	100vh

Typography

Property	Element	Token	Value
`font-size`	Loading label	`font-scale-02`	14px
`font-weight`	Loading label	`font-regular`	400
`font-size`	Percentage	`font-scale-02`	14px
`font-weight`	Percentage	`font-bold`	600

Border

Property	Element	Token	Value
`stroke`	Spinner circle (large)	-	8.5px solid
`stroke`	Spinner circle (small)	-	2px solid

Contents

Edit this page on GitHub

Previous