Angular ProgressBar is a process status indicator.
<h3 id="setup">Setup</h3>
Refer to PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import {ProgressBarModule} from 'primeng/progressbar';
</code></pre>
<h3 id="getting-started">Getting Started</h3>
ProgressBar has two modes; "determinate" and "indeterminate". Former requires a value between 0 and 100 to display the progress.
<pre><code class="lang-html">&lt;p-progressBar [value]="value"&gt;&lt;/p-progressBar&gt;
</code></pre>
<pre><code class="lang-js">export class ModelComponent {

 value: number = 0;

}
</code></pre>
Indeterminate has no such a requirement and is simple enabled using mode property.
<pre><code class="lang-html">&lt;p-progressBar mode="indeterminate"&gt;&lt;/p-progressBar&gt;
</code></pre>
<h3 id="theming">Theming</h3>
ProgressBar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primeng/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/progressbar">ProgressBar</a> showcase for demos and documentation.

Angular ProgressBar is a process status indicator.

### Setup

Refer to PrimeNG [setup documentation](https://primefaces.org/primeng/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import {ProgressBarModule} from 'primeng/progressbar';
```

### Getting Started

ProgressBar has two modes; "determinate" and "indeterminate". Former requires a value between 0 and 100 to display the progress.

```html
<p-progressBar [value]="value"></p-progressBar>
```

```js
export class ModelComponent {

 value: number = 0;

}
```

Indeterminate has no such a requirement and is simple enabled using **mode** property.

```html
<p-progressBar mode="indeterminate"></p-progressBar>
```

### Theming

ProgressBar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primeng/showcase/#/theming) tool.

### Resources

Visit the PrimeNG [ProgressBar](https://primefaces.org/primeng/showcase/#/progressbar) showcase for demos and documentation.