ProgressSpinner is a process status indicator.
import { ProgressSpinnerModule } from 'primeng/progressspinner';
An infinite spin animation is displayed by default.
<p-progressSpinner></p-progressSpinner>
ProgressSpinner can be customized with styling property like styleClass, strokeWidth and fill.
<p-progressSpinner styleClass="w-4rem h-4rem" strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s"></p-progressSpinner>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-progress-spinner | Container element. |
| p-progress-circle | SVG element. |
| p-progress-path | Circle element. |
ProgressSpinner components uses progressbar role. Value to describe the component can be defined using aria-labelledby and aria-label props.
<p-progressSpinner aria-label="Loading"></p-progressSpinner>
Component does not include any interactive elements.
API defines helper props, events and others for the PrimeNG ProgressSpinner module.
| Name | Type | Default | Description |
|---|---|---|---|
| style | object | null | Inline style of the component. |
| styleClass | string | null | Style class of the component. |
| strokeWidth | string | 2 | Width of the circle stroke. |
| fill | string | null | Color for the background of the circle. |
| animationDuration | string | 2s | Duration of the rotate animation. |