# Progress Bar

To use Progress Bar, first import `SharedModule` in your module.

```typescript
import {SharedModule} from '@gaxon/modules';

@NgModule({
  ...
  imports: [SharedModule, ...],
  ...
})
export class YourAppModule {
}
```

### Basic Progress Bars

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LuPCxRAaG0RprmqevGh%2F-LufbinGztn0CNCsGOuO%2Fprogress-bars.png?alt=media\&token=4730544f-25fb-41aa-b15b-5203ba9bbc99)

{% endtab %}

{% tab title="HTML" %}

```markup
<ngb-progressbar type="success" [value]="25"></ngb-progressbar>
<ngb-progressbar type="info" [value]="50"></ngb-progressbar>
<ngb-progressbar type="warning" [value]="75"></ngb-progressbar>
<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>
```

{% endtab %}
{% endtabs %}

### Custom Labels and Striped

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LufbwlbH6UeF4E5u2uZ%2F-Lufc456hMRnv7yWKTYl%2Fprogress-bars-with-custom-labels.png?alt=media\&token=8915f2e8-fc59-42ac-b2fd-436ffe31bbf1)
{% endtab %}

{% tab title="HTML" %}

```markup
<ngb-progressbar type="success" [value]="25">25</ngb-progressbar>
<ngb-progressbar type="info" [value]="50">Copying file 2 of 4...</ngb-progressbar>
<ngb-progressbar type="warning" [value]="75" [striped]="true" [animated]="true"><i>50%</i></ngb-progressbar>
<ngb-progressbar type="danger" [value]="100" [striped]="true">Completed!</ngb-progressbar>
```

{% endtab %}
{% endtabs %}

### Current Value Labels

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-LufcTg3N_Y3KZEd4JLI%2F-LufchMyGqXr4WBkBT_k%2Fprogress-bars-value.png?alt=media\&token=c70d6b24-a573-4cd4-82f8-6e81db7cc8b6)
{% endtab %}

{% tab title="HTML" %}

```markup
<ngb-progressbar showValue="true" type="success" [value]="25"></ngb-progressbar>
<ngb-progressbar [showValue]="true" type="info" [value]="50"></ngb-progressbar>
<ngb-progressbar showValue="true" type="warning" [value]="150" [max]="200"></ngb-progressbar>
<ngb-progressbar [showValue]="true" type="danger" [value]="150" [max]="150"></ngb-progressbar>
```

{% endtab %}
{% endtabs %}

### Progress Bars height

{% tabs %}
{% tab title="Preview" %}
![](https://4005223133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtxeWkvBVhyEq4IYIR1%2F-Lufd9HeSdW7Ud7JO_oD%2F-LufdGZIEBT0noibStpS%2Fprogress-bars-height.png?alt=media\&token=2c12f13f-4cc7-49d0-8ebc-ca39c37b3546)
{% endtab %}

{% tab title="HTML" %}

```markup
<ngb-progressbar type="success" [value]="25">default</ngb-progressbar>
<ngb-progressbar type="info" [value]="50" height="10px">10px</ngb-progressbar>
<ngb-progressbar type="warning" [value]="75" height=".5rem">.5rem</ngb-progressbar>
<ngb-progressbar type="danger" [value]="100" [height]="height">{{height}}</ngb-progressbar>
```

{% endtab %}
{% endtabs %}

For more information about options, check the [Ng-Bootstrap](https://ng-bootstrap.github.io/#/components/progressbar/examples)