# 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" %}
![](/files/-LufbinGztn0CNCsGOuO)

{% 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" %}
![](/files/-Lufc456hMRnv7yWKTYl)
{% 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" %}
![](/files/-LufchMyGqXr4WBkBT_k)
{% 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" %}
![](/files/-LufdGZIEBT0noibStpS)
{% 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-drift-angular.g-axon.work/components/progress-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.