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
Blogs
All blogsProgress
Designer doc
Indicates the current progress of a task.
Example
Progress Bar
View code
Progress Bar Variant
Inline variant does not have label
View code
Progress Bar Indeterminate
Set value to null when the progress is indeterminate
View code
Progress Bar Size
Progress bars come in three different sizes: small, medium, large, with medium size as the default.
View code
Progress Bar Status
The status is Pending by default, but when value equal to outOf, the status will become Success. status prop can be overwrite with Warning and Failed status. The status is indicated by the progress color and the label.
View code
Bar Content and Indicator
ProgressBarIndicator is rendered on the right by default. You can specifiy null to indicator prop to hide it.
Also, you can specify progressProps.children to display ProgressPercentage inside the progress bar. Note that ProgressBarIndicator shows ProgressPercentage when status is pending.
View code
Bar Colors, Sizes, and Radius
View code
Progress Circle
View code
Progress Circle Statuses
Similar to Progress Bar status.
View code
Progress Circle Indeterminate
Set value to null when the progress is indeterminate
View code
Circle Colors and Sizes
ProgressCircle’s color is based on whether it’s completed or failed. You can provide color or colorType to override it. To customize the trail color, you can specify trailColor or trailColorType.
The default size of this component is 80px and thickness of 6px, and is customizable using size and thickness props.
View code
Customizing Circle Content
By default ProgressCircle renders ProgressCircleIndicator as its children - this display percentage or icons based on completion rate and status. You can specify something else like null to hide it, or ProgressPercentage to always show the percent instead of icons.
View code
More Circle Customizations
Below is an example of simplified Apple Watch Activity.
View code
Accessibility
Both ProgressBar and ProgressCircle have role progressbar with attributes aria-valuemin, aria-valuemax, and aria-valuenow.
References
- Material-UI: https://material-ui.com/components/progress/
- Adobe Spectrum: https://react-spectrum.adobe.com/react-spectrum/ProgressBar.html
- Ant Design: https://ant.design/components/progress/
API
ProgressPercentage
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | void | WebTarget | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| forwardedAs | void | WebTarget | ||
| theme | DefaultTheme |
ProgressBar
| 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 | ||
| ellipsisTooltipProps | EllipsisTooltipProps | ||
| indicator | ReactNode | ||
| indicatorProps | HTMLAttributes<HTMLDivElement> | ||
| label | ReactNode | ||
| labelProps | HTMLAttributes<HTMLDivElement> | ||
| outOf | number | 100 | |
| progressProps | Omit<ProgressBarLineProps, "value" | "onAnimate"> | ||
| size | ProgressBarSizes | medium | |
| status | ProgressStatuses | ||
| thickness | number | ||
| trailColor | string | ||
| trailColorType | ColorTypes | ||
| trailProps | ProgressBarBaseLineProps | ||
| transitionThreshold | number | 5 | Transition threshold used to determine when to sync the animation status with the progress status. Set to a lower value for a more delayed effect. Default value is 5. |
| value | number | ||
| variant | ProgressBarVariants | basic |
ProgressBarBaseLine
| 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 | ||
| radius | number | ||
| thickness | number |
ProgressBarIndicator
| 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. | |
| failedContent | ReactNode | ||
| pendingContent | ReactNode | ||
| successContent | ReactNode | ||
| warningContent | ReactNode |
ProgressBarLine
| 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 | ||
| onAnimate | (animationProgressValue: number) => void | ||
| outOf | number | ||
| radius | number | ||
| thickness | number | ||
| value | number |
AnimatedCheck
| 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 | ||
| containerProps | ContainerProps & { ref?: Ref<SVGSVGElement>; } | ||
| size | number | ||
| springConfig | Partial<AnimationConfig> | { duration: 400, easing: easings.easeInOutQuart } | |
| thickness | number |
AnimatedCross
| 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 | ||
| containerProps | ContainerProps & { ref?: Ref<SVGSVGElement>; } | ||
| size | number | ||
| springConfig | Partial<AnimationConfig> | { duration: 400, easing: easings.easeOutExpo } | |
| thickness | number |
AnimatedWarning
| 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 | ||
| containerProps | ContainerProps & { ref?: Ref<SVGSVGElement>; } | ||
| dotProps | DotProps & { ref?: Ref<SVGCircleElement>; } | ||
| dotSpringConfig | Partial<AnimationConfig> | { tension: 200, friction: 10 } | |
| height | number | ||
| springConfig | Partial<AnimationConfig> | ||
| thickness | number |
ProgressCircle
| 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 | ||
| ellipsisTooltipProps | EllipsisTooltipProps | ||
| label | ReactNode | ||
| labelProps | EllipsisTooltipProps | ||
| outOf | number | 100 | |
| progressProps | Omit<ProgressCircleLineProps, "value" | "onAnimationFinish"> | ||
| size | number | 80 | |
| status | ProgressStatuses | ||
| thickness | number | 6 | |
| trailColor | string | ||
| trailColorType | ColorTypes | ||
| trailProps | Omit<ProgressCircleLineProps, "value" | "onAnimationFinish"> | ||
| transitionThreshold | number | 10 | |
| value | number |
ProgressCircleIndicator
| 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. | |
| failedContent | ReactNode | <AnimatedCross /> | |
| pendingContent | ReactNode | <StyledProgressPercentage /> | |
| successContent | ReactNode | <AnimatedCheck /> | |
| warningContent | ReactNode | <AnimatedWarning /> |
ProgressCircleLine
| 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 | ||
| containerProps | ContainerProps & { ref?: Ref<SVGSVGElement>; } | ||
| onAnimate | (progressValue: number) => void | ||
| outOf | number | ||
| size | number | ||
| springConfig | Partial<AnimationConfig> | ||
| thickness | number | ||
| value | number |