Layout
Delish has 4 different layout options for a spinner: text before, after, above and below.
Visual of layout options
Styles
There are 2 styles of the spinner: primary and inverted. Use primary on light colored backgrounds and inverted on dark colored backgrounds.
Visual of style options
Color application by style
|
|
Design token |
Value |
|---|---|---|
|
(1) Primary animated part of spinner |
BrandStroke1.Rest |
#295CAD |
|
(2) Primary static |
BrandStroke2Contrast.Rest |
#CADEFF |
|
(3) Text |
NeutralForeground1.Rest |
#0F1A38 |
|
(4) Inverted animated part of spinner |
BrandStroke2Contrast.Rest |
#CADEFF |
|
(5) Inverted static |
NeutralStrokeAlpha2.Rest |
#FFFFFF 20% opacity |
|
(6) Inverted text |
NeutralForegroundStaticInverted.Rest |
#FFFFFF |
Size options
Delish has 7 sizes options for a spinner ranging from tiny to huge.
Visual of size options
Specs by size
|
|
Design token |
Value |
|---|---|---|
|
(1) Spinner |
N/A |
Tiny: 20px × 20px Extra small: 24px × 24px Small: 28px × 28px Medium: 32px × 32px Large: 36px × 36px Extra large: 40px × 40px Huge: 44px × 44px |
|
(2) Text |
Tiny: body1 Extra small: body1 Small: body1 Medium: body2Strong Large: body2Strong Extra large: body2Strong Huge: title4Strong |
Tiny: 14px/11pt, Regular Extra small: 14px/11pt, Regular Small: 14px/11pt, Regular Medium: 16px/12pt, Semibold Large: 16px/12pt, Semibold Extra large: 16px/12pt, Semibold Huge: 20px/15pt, Semibold |
Spacing
|
|
Design token |
Value |
|---|---|---|
|
Padding between spinner and text in horizontal format |
spacingHorizontalS |
8px |
|
Padding between spinner and text in stacked format |
spacingVerticalS |
8px |