Progress

Display the current progress of the operation.

When to use

If it will take a long time to complete an operation, you can use Progress to show the current progress and status.

When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.
When you need to display the completion percentage of an operation.

Examples

Progress bar

A standard progress bar.

Mini size progress bar

Appropriate for a narrow area.

Mini size circular progress bar

A smaller circular progress bar.

Custom text format

You can set a custom text by setting the format prop.

Progress bar with success segment

Show several parts of progress with different status.

Custom line gradient

Gradient encapsulation, circle and dashboard will ignore strokeLinecap when setting gradient.

Circular progress bar with steps

A circular progress bar that support steps and color segments, default gap is 2px.

Change progress value position

Change the position of the progress value, you can use percentPosition to adjust it so that the progress bar value is inside, outside or at the bottom of the progress bar.

Circular progress bar

A circular progress bar.

Responsive circular progress bar

Responsive circular progress bar. When width is smaller than 20, progress information will be displayed in Tooltip.

Dynamic

A dynamic progress bar is better.

Dashboard

By setting type=dashboard, you can get a dashboard style of progress easily.

Stroke Linecap

By setting strokeLinecap="butt", you can change the linecaps from round to butt, see stroke-linecap for more information.

Progress bar with steps

A progress bar with steps.

Progress size

The size of progress.

Custom semantic dom styling

You can customize the semantic dom style of Progress by passing objects or functions through classNames and styles.

API

Progress are exported from @ceebee/ui/client.

Progress

Property	Description	Type	Default	Version
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	6.0.0
`format`	The template function of the content	`function(percent, successPercent)`	`(percent) => percent + %`	-
`percent`	To set the completion percentage	`number`	`0`	-
`railColor`	The color of unfilled part	`string`	`-`	-
`showInfo`	Whether to display the progress value and the status icon	`boolean`	`true`	-
`status`	To set the status of the Progress, options: success exception normal active(line only)	`string`	`-`	-
`strokeColor`	The color of progress bar	`string`	`-`	-
`strokeLinecap`	To set the style of the progress linecap	`round \| butt \| square, see stroke-linecap`	`round`	-
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	6.0.0
`success`	Configs of successfully progress bar	`{ percent: number, strokeColor: string }`	`-`	-
`trailColor`	The color of unfilled part. Please use railColor instead	`string`	`-`	-
`type`	To set the type, options: line circle dashboard	`string`	`line`	-
`size`	Progress size	`number \| \[number \| string, number] \| { width: number, height: number } \| "small" \| "medium"`	`"medium"`	5.3.0, Object: 5.18.0

type="line"

Property	Description	Type	Default	Version
`steps`	The total step count	`number`	`-`	-
`rounding`	The function to round the value	`(step: number) => number`	`Math.round`	5.24.0
`strokeColor`	The color of progress bar, render linear-gradient when passing an object, could accept string[] when has steps.	`string \| string[] \| { from: string; to: string; direction: string }`	`-`	4.21.0: string[]
`percentPosition`	Progress value position, passed in object, align indicates the horizontal position of the value, type indicates whether the value is inside or outside the progress bar	`{ align: string; type: string }`	`{ align: \"end\", type: \"outer\" }`	5.18.0

type="circle"

Property	Description	Type	Default	Version
`steps`	The total step count. When passing an object, count refers to the number of steps, and gap refers to the distance between them. When passing a number, the default value for gap is 2.	`number \| { count: number, gap: number }`	`-`	5.16.0
`strokeColor`	The color of circular progress, render gradient when passing an object	`string \| { number%: string }`	`-`	-
`strokeWidth`	To set the width of the circular progress, unit: percentage of the canvas width	`number`	`6`	-

type="dashboard"

Property	Description	Type	Default	Version
`steps`	The total step count. When passing an object, count refers to the number of steps, and gap refers to the distance between them. When passing a number, the default value for gap is 2.	`number \| { count: number, gap: number }`	`-`	5.16.0
`gapDegree`	The gap degree of half circle, 0 ~ 295	`number`	`75`	-
`gapPlacement`	The gap placement, options: top bottom start end	`string`	`bottom`	-
`gapPosition`	The gap position, options: top bottom left right, please use gapPlacement instead	`string`	`bottom`	-
`strokeWidth`	To set the width of the dashboard progress, unit: percentage of the canvas width	`number`	`6`	-