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%
Progress bar

A standard progress bar.

expand codeexpand code
      Loading...
30%
50%
Mini size progress bar

Appropriate for a narrow area.

expand codeexpand code
      Loading...
0%
Dynamic circular progress bar

A dynamic progress bar is better.

expand codeexpand code
      Loading...
75 Days
Done
Custom text format

You can custom text format by setting nzFormat.

expand codeexpand code
      Loading...
60%
60%
60%
Progress bar with success segment

A standard progress bar.

expand codeexpand code
      Loading...
99.9%
99.9%
90%
Custom line gradient

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

expand codeexpand code
      Loading...
75%
Circular progress bar

A circular progress bar.

expand codeexpand code
      Loading...
75%
Mini size circular progress bar

A smaller circular progress bar.

expand codeexpand code
      Loading...
0%
Dynamic

A dynamic progress bar is better.

expand codeexpand code
      Loading...
75%
Dashboard

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

expand codeexpand code
      Loading...
75%
75%
75%
Square linecaps

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

expand codeexpand code
      Loading...
50%
30%
Progress bar with steps

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'✅