Progress

Line, segmented, inset, and circular progress indicators with status colors and a determinate info label.

import { Progress } from '@lobehub/ui/base-ui';

NPM Source Edit

Feedback

Basic

Loading preview

APIs

Progress properties

className: string
format: (percent: number) => ReactNode
label: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
percentRequired: number
ref: null | RefObject<HTMLDivElement | null> | (instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
segments: number
Defaults to 20.
showInfo: boolean
Defaults to true.
size: number | 'small' | 'middle' | 'large'
Defaults to "middle".
status: 'normal' | 'active' | 'success' | 'exception'
Defaults to "normal".
strokeColor: string
style: CSSProperties
type: 'circle' | 'line'
Defaults to "line".
variant: 'inset' | 'line' | 'segments'
Defaults to "line".

Also accepts all native HTML and ARIA attributes.

Progress renders a native <div>. All standard div HTML attributes including className, style, data-*, and ref are forwarded to the root element.

Variants

type="line" (default) supports three variants: line (a label and value row above a thin track), segments (independent cells, count set by segments), and inset (a track with an inset bar). type="circle" renders an SVG ring instead.

Status

status accepts normal, active, success, or exception. success and exception replace the info text with a check or cross icon; active adds a shimmer animation to the line variant's bar.

Migrating from antd Progress

import { Progress } from '@lobehub/ui/base-ui';

<Progress percent={62} status="active" />;

steps, strokeLinecap="square", trailColor, and gradient strokeColor are not supported; use variant="segments" for step-like semantics.

antd's size="default" becomes size="middle".