Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Spinner
Designer doc
Spinner is an animated graphic on loop that indicates the loading state of the system. It is commonly used for short (1s < time < 10s) and indeterminate progress.
Example
Basic usage
View code
Orientations
Spinner has vertical(default) and horizontal orientation.
View code
Size
Spinner comes with small, medium and large size, with medium as the default size.
View code
With Button
Spinner is use in Button and IconButton
View code
Customization
Spinner is implemented with indeterminate ProgressCircle so it can be customize using progressCircleProps
View code
API
Spinner
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| color | string | ||
| colorType | ColorTypes | neuFore3rd | |
| height | Height<string | number> | ||
| orientation | SpinnerOrientations | vertical | |
| progressCircleProps | Omit<ProgressCircleProps, "value" | "colorType" | "trailColorType"> | ||
| size | SpinnerSizes | medium |