Progress Bar overview

NbProgressBarComponent

Progress Bar is a component for indicating progress.

Simple usage:

<nb-progress-bar [value]="50"></nb-progress-bar>

Installation

Import NbProgressBarModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbProgressBarModule,
  ],
})
export class PageModule { }

Usage

Progress bar accepts property value in range 0-100

Progress bar background could be configured by providing a status property:

Progress bar size (height and font-size) could be configured by providing a size property:

displayValue property shows current value inside progress bar. It's also possible to add custom text inside:

Progress bar supports width and background-color transition: