Run the CLI
Use the CLI to add the component to your project.
npx @ngzard/ui@latest add progress-barProgress Bar
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
import { Component } from '@angular/core';
import { ZardProgressBarComponent } from '../progress-bar.component';
@Component({
selector: 'z-demo-progress-bar-basic',
imports: [ZardProgressBarComponent],
standalone: true,
template: ` <z-progress-bar [progress]="50" /> `,
})
export class ZardDemoProgressBarBasicComponent {}
Installation
Add the component files
Create the component directory structure and add the following files to your project.
Examples
basic
import { Component } from '@angular/core';
import { ZardProgressBarComponent } from '../progress-bar.component';
@Component({
selector: 'z-demo-progress-bar-basic',
imports: [ZardProgressBarComponent],
standalone: true,
template: ` <z-progress-bar [progress]="50" /> `,
})
export class ZardDemoProgressBarBasicComponent {}
indeterminate
import { Component } from '@angular/core';
import { ZardProgressBarComponent } from '../progress-bar.component';
@Component({
selector: 'z-demo-progress-bar-indeterminate',
imports: [ZardProgressBarComponent],
standalone: true,
template: ` <z-progress-bar [progress]="50" zShape="square" [zIndeterminate]="true" /> `,
})
export class ZardDemoProgressBarIndeterminateComponent {}
shape
import { Component } from '@angular/core';
import { ZardProgressBarComponent } from '../progress-bar.component';
@Component({
selector: 'z-demo-progress-bar-shape',
imports: [ZardProgressBarComponent],
standalone: true,
template: `
<z-progress-bar [progress]="50" zShape="default" />
<z-progress-bar [progress]="50" zShape="circle" />
<z-progress-bar [progress]="50" zShape="square" />
`,
styles: `
:host {
display: flex;
flex-direction: column;
gap: 24px;
}
`,
})
export class ZardDemoProgressBarShapeComponent {}
size
import { Component } from '@angular/core';
import { ZardProgressBarComponent } from '../progress-bar.component';
@Component({
selector: 'z-demo-progress-bar-size',
imports: [ZardProgressBarComponent],
standalone: true,
template: `
<z-progress-bar [progress]="50" zSize="default" />
<z-progress-bar [progress]="50" zSize="sm" />
<z-progress-bar [progress]="50" zSize="lg" />
`,
styles: `
:host {
display: flex;
flex-direction: column;
gap: 24px;
}
`,
})
export class ZardDemoProgressBarSizeComponent {}