<p>Angular ProgressSpinner is a process status indicator.</p>
<h3 id="setup">Setup</h3>
<p>Refer to PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.</p>
<h3 id="import">Import</h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> {ProgressSpinnerModule} <span class="hljs-keyword">from</span> <span class="hljs-string">'primeng/progressspinner'</span>;
</code></pre>
<h3 id="getting-started">Getting Started</h3>
<p>ProgressSpinner is defined using p-progressSpinner element.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">p-progressSpinner</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p-progressSpinner</span>&gt;</span>
</code></pre>
<h3 id="colors">Colors</h3>
<p>Colors of the spinner can be changed by overriding the keyframes animation</p>
<pre><code class="lang-css"><span class="hljs-keyword">@keyframes</span> p-progress-spinner-color {
    100%,
    0% {
        <span class="hljs-attribute">stroke</span>: <span class="hljs-number">#d62d20</span>;
    }
    40% {
        <span class="hljs-attribute">stroke</span>: <span class="hljs-number">#0057e7</span>;
    }
    66% {
        <span class="hljs-attribute">stroke</span>: <span class="hljs-number">#008744</span>;
    }
    80%,
    90% {
        <span class="hljs-attribute">stroke</span>: <span class="hljs-number">#ffa700</span>;
    }
}
</code></pre>
<h3 id="theming">Theming</h3>
<p>ProgressSpinner 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.</p>
<h3 id="resources">Resources</h3>
<p>Visit the PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/progressspinner">ProgressSpinner</a> showcase for demos and documentation.</p>


Angular ProgressSpinner 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 {ProgressSpinnerModule} from 'primeng/progressspinner';
```

### Getting Started

ProgressSpinner is defined using p-progressSpinner element.

```html
<p-progressSpinner></p-progressSpinner>
```

### Colors

Colors of the spinner can be changed by overriding the keyframes animation

```css
@keyframes p-progress-spinner-color {
    100%,
    0% {
        stroke: #d62d20;
    }
    40% {
        stroke: #0057e7;
    }
    66% {
        stroke: #008744;
    }
    80%,
    90% {
        stroke: #ffa700;
    }
}
```

### Theming

ProgressSpinner 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 [ProgressSpinner](https://primefaces.org/primeng/showcase/#/progressspinner) showcase for demos and documentation.