Spinner

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 tokenElementCore tokenValue
trackCircleColorSpinner circle (track)color-purple-700#5f249f
trackCircleColorOverlaySpinner circle (track)color-purple-500#a46ede
totalCircleColorSpinner circle (total)color-white#ffffff
labelFontColorLabelcolor-black#000000
progressValueFontColorPercentagecolor-black#000000
overlayBackgroundColorOverlaycolor-grey-800-a#000000b3
overlayLabelFontColorOverlaycolor-white#ffffff
overlayProgressValueFontColorOverlaycolor-white#ffffff

Size

PropertyElementCore tokenValue
widthSpinner container (large)-140px
heightSpinner container (large)-140px
widthSpinner container (small)-16px
heightSpinner container (small)-16px
max-widthOverlay-100vw
max-heightOverlay-100vh

Typography

PropertyElementCore tokenValue
font-sizeLoading labelfont-scale-0214px
font-weightLoading labelfont-regular400
font-sizePercentagefont-scale-0214px
font-weightPercentagefont-bold700

Border

PropertyElementCore tokenValue
strokeSpinner circle (large)-8.5px solid
strokeSpinner circle (small)-2px solid