Progress

Display the current progress of an operation flow.

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.
import { NzProgressModule } from 'ng-zorro-antd/progress';

Examples

30%
50%

A standard progress bar.

expand codeexpand code
Loading...
30%
50%

Appropriate for a narrow area.

expand codeexpand code
Loading...
0%

A dynamic progress bar is better.

expand codeexpand code
Loading...
75 Days
Done

You can custom text format by setting nzFormat.

expand codeexpand code
Loading...
60%
60%
60%

A standard progress bar.

expand codeexpand code
Loading...
99.9%
99.9%
90%

A package of linear-gradient. It is recommended to only pass two colors.

expand codeexpand code
Loading...
75%

A circular progress bar.

expand codeexpand code
Loading...
75%

A smaller circular progress bar.

expand codeexpand code
Loading...
0%

A dynamic progress bar is better.

expand codeexpand code
Loading...
75%

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

expand codeexpand code
Loading...
75%
75%
75%

By setting nzStrokeLinecap='square', you can change the linecaps from round to square.

expand codeexpand code
Loading...
50%
30%

A progress bar with steps.

expand codeexpand code
Loading...

API#

nz-progress#

PropertyDescriptionTypeDefaultGlobal Config
[nzType]to set the type'line' | 'circle' | 'dashboard''line'
[nzFormat]template function of the content(percent: number) => string | TemplateRef<{ $implicit: number }>percent => percent + '%'
[nzPercent]to set the completion percentagenumber0
[nzShowInfo]whether to display the progress value and the status iconbooleantrue
[nzStatus]to set the status of the Progress'success' | 'exception' | 'active' | 'normal'-
[nzStrokeLinecap]to set the style of the progress linecap'round' | 'square''round'
[nzStrokeColor]color of progress bar, render linear-gradient when passing an objectstring | { from: string; to: string: direction: string; [percent: string]: string }-
[nzSuccessPercent]segmented success percentnumber0

nzType="line"#

PropertyDescriptionTypeDefault
[nzStrokeWidth]to set the width of the progress bar, unit: pxnumber8
[nzSteps]the total step countnumber-

nzType="circle"#

PropertyDescriptionTypeDefaultGlobal Config
[nzWidth]to set the canvas width of the circular progress bar, unit: pxnumber132
[nzStrokeWidth]to set the width of the circular progress bar, unit: percentage of the canvas widthnumber6

nzType="dashboard"#

PropertyDescriptionTypeDefaultGlobal Config
[nzWidth]to set the canvas width of the dashboard progress bar, unit: pxnumber132
[nzStrokeWidth]to set the width of the dashboard progress bar, unit: percentage of the canvas widthnumber6
[nzGapDegree]the gap degree of half circle, 0 ~ 360number0
[nzGapPosition]the gap position'top' | 'right' | 'bottom' | 'left''top'