ProgressSpinner

ProgressSpinner is a process status indicator.


import { ProgressSpinnerModule } from 'primeng/progressspinner';

An infinite spin animation is displayed by default.


<p-progressSpinner ariaLabel="loading" />

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" />

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-progress-spinnerContainer element.
p-progress-spinner-svgSVG element.
p-progress-spinner-circleCircle element.

Screen Reader

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>

Keyboard Support

Component does not include any interactive elements.