Progress Bar

Search…

Progress Bar

To use Progress Bar, first import SharedModule in your module.
1
import {SharedModule} from '@gaxon/modules';
2
​
3
@NgModule({
4
  ...
5
  imports: [SharedModule, ...],
6
  ...
7
})
8
export class YourAppModule {
9
}
Copied!
Basic Progress Bars
Preview
HTML
​
1
<ngb-progressbar type="success" [value]="25"></ngb-progressbar>
2
<ngb-progressbar type="info" [value]="50"></ngb-progressbar>
3
<ngb-progressbar type="warning" [value]="75"></ngb-progressbar>
4
<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>
Copied!
Custom Labels and Striped
Preview
HTML
1
<ngb-progressbar type="success" [value]="25">25</ngb-progressbar>
2
<ngb-progressbar type="info" [value]="50">Copying file 2 of 4...</ngb-progressbar>
3
<ngb-progressbar type="warning" [value]="75" [striped]="true" [animated]="true"><i>50%</i></ngb-progressbar>
4
<ngb-progressbar type="danger" [value]="100" [striped]="true">Completed!</ngb-progressbar>
Copied!
Current Value Labels
Preview
HTML
1
<ngb-progressbar showValue="true" type="success" [value]="25"></ngb-progressbar>
2
<ngb-progressbar [showValue]="true" type="info" [value]="50"></ngb-progressbar>
3
<ngb-progressbar showValue="true" type="warning" [value]="150" [max]="200"></ngb-progressbar>
4
<ngb-progressbar [showValue]="true" type="danger" [value]="150" [max]="150"></ngb-progressbar>
Copied!
Progress Bars height
Preview
HTML
1
<ngb-progressbar type="success" [value]="25">default</ngb-progressbar>
2
<ngb-progressbar type="info" [value]="50" height="10px">10px</ngb-progressbar>
3
<ngb-progressbar type="warning" [value]="75" height=".5rem">.5rem</ngb-progressbar>
4
<ngb-progressbar type="danger" [value]="100" [height]="height">{{height}}</ngb-progressbar>
Copied!
For more information about options, check the Ng-Bootstrap​

Components - Previous

Dropdowns

Next - Components

Tabs

Last modified 2yr ago

Copy link

Contents

Basic Progress Bars

Custom Labels and Striped

Current Value Labels

Progress Bars height