<p>Vue3 ProgressBar is a process status indicator.
It supports Vue 3 with <a target="_blank" href="https://primefaces.org/primevue/showcase">PrimeVue 3</a> and Vue 2 with <a target="_blank" href="https://primefaces.org/primevue/showcase-v2">PrimeVue 2</a>.</p>
<h3 id="setup">Setup</h3>
<p>Refer to PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/setup">setup documentation</a> for download and installation steps for your environment such as Vue CLI, Vite or browser.</p>
<h3 id="import">Import</h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> ProgressBar <span class="hljs-keyword">from</span> <span class="hljs-string">'primevue/progressbar'</span>;
</code></pre>
<h3 id="getting-started">Getting Started</h3>
<p>ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">ProgressBar</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"value"</span> /&gt;</span>
</code></pre>
<pre><code class="lang-js">data() {
    <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-number">0</span>
    }
}
</code></pre>
<p>Indeterminate is simplly enabled using <strong>mode</strong> property.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">ProgressBar</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"indeterminate"</span>/&gt;</span>
</code></pre>
<h3 id="slot">Slot</h3>
<p>A custom label can be placed inside the progress bar via the default slot.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">ProgressBar</span> <span class="hljs-attr">:value</span>=<span class="hljs-string">"value"</span>&gt;</span>
    Percent Complete: {{value}}%
<span class="hljs-tag">&lt;/<span class="hljs-name">ProgressBar</span>&gt;</span>
</code></pre>
<h3 id="theming">Theming</h3>
<p>ProgressBar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primevue/showcase/#/theming">Designer</a> tool.</p>
<h3 id="resources">Resources</h3>
<p>Visit the PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/progressbar">ProgressBar</a> showcase for demos and documentation.</p>


Vue3 ProgressBar is a process status indicator.
It supports Vue 3 with [PrimeVue 3](https://primefaces.org/primevue/showcase) and Vue 2 with [PrimeVue 2](https://primefaces.org/primevue/showcase-v2).

### Setup

Refer to PrimeVue [setup documentation](https://primefaces.org/primevue/showcase/#/setup) for download and installation steps for your environment such as Vue CLI, Vite or browser.

### Import

```js
import ProgressBar from 'primevue/progressbar';
```

### Getting Started

ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.

```html
<ProgressBar :value="value" />
```

```js
data() {
	return {
		value: 0
	}
}
```

Indeterminate is simplly enabled using **mode** property.

```html
<ProgressBar mode="indeterminate"/>
```

### Slot

A custom label can be placed inside the progress bar via the default slot.

```html
<ProgressBar :value="value">
    Percent Complete: {{value}}%
</ProgressBar>
```

### Theming

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

### Resources

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