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 this Component Individually#

You can get more detail here.

import { NzProgressModule } from 'ng-zorro-antd/progress';

Examples

30%
50%

A standard progress bar.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-progress-line',
  template: `
    <nz-progress [nzPercent]="30"></nz-progress>
    <nz-progress [nzPercent]="50" nzStatus="active"></nz-progress>
    <nz-progress [nzPercent]="70" nzStatus="exception"></nz-progress>
    <nz-progress [nzPercent]="100"></nz-progress>
    <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress>
  `
})
export class NzDemoProgressLineComponent {}
30%
50%

Appropriate for a narrow area.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-progress-line-mini',
  template: `
    <div style="width: 170px;">
      <nz-progress [nzPercent]="30" nzSize="small"></nz-progress>
      <nz-progress [nzPercent]="50" nzSize="small" nzStatus="active"></nz-progress>
      <nz-progress [nzPercent]="70" nzSize="small" nzStatus="exception"></nz-progress>
      <nz-progress [nzPercent]="100" nzSize="small"></nz-progress>
      <nz-progress [nzPercent]="50" nzSize="small" [nzShowInfo]="false"></nz-progress>
    </div>
  `
})
export class NzDemoProgressLineMiniComponent {}
0%

A dynamic progress bar is better.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-progress-circle-dynamic',
  template: `
    <nz-progress [nzPercent]="percent" nzType="circle"></nz-progress>
    <nz-button-group>
      <button nz-button (click)="decline()"><i nz-icon nzType="minus"></i></button>
      <button nz-button (click)="increase()"><i nz-icon nzType="plus"></i></button>
    </nz-button-group>
  `,
  styles: [
    `
      nz-progress {
        margin-right: 8px;
      }
    `
  ]
})
export class NzDemoProgressCircleDynamicComponent {
  percent = 0;

  increase(): void {
    this.percent = this.percent + 10;
    if (this.percent > 100) {
      this.percent = 100;
    }
  }

  decline(): void {
    this.percent = this.percent - 10;
    if (this.percent < 0) {
      this.percent = 0;
    }
  }
}
75 Days
Done

You can custom text format by setting nzFormat.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-progress-format',
  template: `
    <nz-progress [nzPercent]="75" nzType="circle" [nzFormat]="formatOne"></nz-progress>
    <nz-progress [nzPercent]="100" nzType="circle" [nzFormat]="formatTwo"></nz-progress>
  `,
  styles: [
    `
      nz-progress {
        margin-right: 8px;
        margin-bottom: 8px;
        display: inline-block;
      }
    `
  ]
})
export class NzDemoProgressFormatComponent {
  formatOne = (percent: number) => `${percent} Days`;
  formatTwo = () => `Done`;
}
60%

A standard progress bar.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-progress-segment',
  template: `
    <nz-progress
      nz-tooltip
      nzTitle="3 done / 3 in progress / 4 to do"
      [nzPercent]="60"
      [nzSuccessPercent]="30"
    ></nz-progress>
  `
})
export class NzDemoProgressSegmentComponent {}
75%

A circular progress bar.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-progress-circle',
  template: `
    <nz-progress [nzPercent]="75" nzType="circle"></nz-progress>
    <nz-progress [nzPercent]="70" nzType="circle" nzStatus="exception"></nz-progress>
    <nz-progress [nzPercent]="100" nzType="circle"></nz-progress>
  `,
  styles: [
    `
      nz-progress {
        margin-right: 8px;
        margin-bottom: 8px;
        display: inline-block;
      }
    `
  ]
})
export class NzDemoProgressCircleComponent {}
75%

A smaller circular progress bar.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-progress-circle-mini',
  template: `
    <nz-progress [nzPercent]="75" nzType="circle" [nzWidth]="80"></nz-progress>
    <nz-progress [nzPercent]="70" nzType="circle" [nzWidth]="80" nzStatus="exception"></nz-progress>
    <nz-progress [nzPercent]="100" nzType="circle" [nzWidth]="80"></nz-progress>
  `,
  styles: [
    `
      nz-progress {
        margin-right: 8px;
        margin-bottom: 8px;
        display: inline-block;
      }
    `
  ]
})
export class NzDemoProgressCircleMiniComponent {}
0%

A dynamic progress bar is better.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-progress-dynamic',
  template: `
    <nz-progress [nzPercent]="percent"></nz-progress>
    <nz-button-group>
      <button nz-button (click)="decline()"><i nz-icon nzType="minus"></i></button>
      <button nz-button (click)="increase()"><i nz-icon nzType="plus"></i></button>
    </nz-button-group>
  `
})
export class NzDemoProgressDynamicComponent {
  percent = 0;

  increase(): void {
    this.percent = this.percent + 10;
    if (this.percent > 100) {
      this.percent = 100;
    }
  }

  decline(): void {
    this.percent = this.percent - 10;
    if (this.percent < 0) {
      this.percent = 0;
    }
  }
}
75%

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-progress-dashboard',
  template: `
    <nz-progress [nzPercent]="75" nzType="dashboard"></nz-progress>
  `
})
export class NzDemoProgressDashboardComponent {}
75%
75%
75%

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

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-progress-round',
  template: `
    <nz-progress nzStrokeLinecap="square" nzPercent="75"></nz-progress>
    <nz-progress nzStrokeLinecap="square" nzType="circle" nzPercent="75"></nz-progress>
    <nz-progress nzStrokeLinecap="square" nzType="dashboard" nzPercent="75"></nz-progress>
  `
})
export class NzDemoProgressRoundComponent {}

API#

nz-progress#

PropertyDescriptionTypeDefault
[nzFormat]template function of the content(percent: number) => stringpercent => percent + '%'
[nzGapDegree](nzType=circle)the gap degree of half circle, 0 ~ 360number0
[nzGapPosition](nzType=circle)the gap position'top' | 'right' | 'bottom' | 'left''top'
[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'-
[nzStrokeWidth](nzType=line)to set the width of the progress bar, unit: pxnumber8
[nzStrokeWidth](nzType=circle)to set the width of the circular progress bar, unit: percentage of the canvas widthnumber6
[nzType]to set the type'line' | 'circle' | 'dashboard''line'
[nzWidth](nzType=circle)to set the canvas width of the circular progress bar, unit: pxnumber132
[nzStrokeLinecap]to set the style of the progress linecap'round' | 'square''round'
[nzStrokeColor]color of progress barstring-