ProgressSpinner

ProgressSpinner is a process status indicator.

Import #


import { ProgressSpinnerModule } from 'primeng/progressspinner';

An infinite spin animation is displayed by default.


<p-progress-spinner ariaLabel="loading" />

ProgressSpinner can be customized with styling property like styleClass, strokeWidth and fill.


<p-progress-spinner 
    strokeWidth="8" 
    fill="transparent" 
    animationDuration=".5s"
    [style]="{ width: '50px', height: '50px' }" />

ProgressSpinner components uses progressbar role. Value to describe the component can be defined using aria-labelledby and aria-label props.


<p-progress-spinner aria-label="Loading"></p-progress-spinner>

Component does not include any interactive elements.

name	type	default	description
styleClass	string	null	Class of the element.
style	Object	null	Inline style of the element.
strokeWidth	string	2	Width of the circle stroke.
fill	string	none	Color for the background of the circle.
animationDuration	string	2s	Duration of the rotate animation.
ariaLabel	string	null	Used to define a aria label attribute the current element.

class	description
p-progressspinner	Class name of the root element
p-progressspinner-spin	Class name of the spin element
p-progressspinner-circle	Class name of the circle element