ProgressSpinner is a process status indicator.
import { ProgressSpinner } from 'primereact/progressspinner';<ProgressSpinner />An infinite spin animation is displayed by default.
'use client';
import { ProgressSpinner } from 'primereact/progressspinner';
export default function BasicDemo() {
return (
<div className="flex justify-center">
<ProgressSpinner />
</div>
);
}
ProgressSpinner can be customized with styling property like style, strokeWidth, fill and animationDuration.
'use client';
import { ProgressSpinner } from 'primereact/progressspinner';
export default function CustomDemo() {
return (
<div className="flex justify-center">
<ProgressSpinner
strokeWidth="8"
fill="transparent"
animationDuration=".5s"
style={{ width: '50px', height: '50px' }}
aria-label="Custom ProgressSpinner"
/>
</div>
);
}
ProgressSpinner components uses progressbar role. Value to describe the component can be defined using aria-labelledby and aria-label props.
<ProgressSpinner aria-label="Loading" />Component does not include any interactive elements.