ProgressSpinner is a process status indicator.
import { ProgressSpinner } from 'primereact/progressspinner';
<ProgressSpinner />
An infinite spin animation is displayed by default.
import { ProgressSpinner } from 'primereact/progressspinner';
export default function BasicDemo() {
return (
<div className="card flex justify-center">
<ProgressSpinner />
</div>
);
}
ProgressSpinner can be customized with styling property like style
, strokeWidth
, fill
and animationDuration
.
import { ProgressSpinner } from 'primereact/progressspinner';
export default function CustomDemo() {
return (
<div className="card 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.