Spryker

Spinner

Indeterminate loading indicator in four sizes and three tones.

Variants

Three colours cover every surface. Brand on light, muted on subdued UI, white on dark.

VariantPurpose
BrandPrimary loading on light backgrounds. Uses the brand colour.
MutedLower emphasis on subdued UI, secondary surfaces, or inline helper text.
WhiteUse on dark surfaces — overlays, dark-mode CTAs, toasts.

Design tokens

TokenValueDescription
icon/brand
#318272
Brand colour
icon/secondary
#7b7b7b
Muted colour
icon/inverse
#ffffff
White (on dark surfaces)
stroke/sm
2px
SM stroke width
stroke/md
2.5px
MD stroke width
stroke/lg
3px
LG stroke width
stroke/xl
3.5px
XL stroke width
size
16/24/32/40
Four discrete sizes
motion/duration/slow
750ms
Full rotation period

Guidelines

Do
  • Use for actions shorter than ~10s — skeleton loaders for longer
  • Pair with a label when context isn't obvious
  • Match colour to surface — white on dark, brand on light
  • Include role="status" and aria-live="polite" for screen readers
Don't
  • Show more than one spinner in the same viewport
  • Use a spinner for determinate progress — use a progress bar
  • Animate colour change — keep the rotation steady
  • Hide the label on icon-only loading states
TooltipBreadcrumb