ProgressSpinner

ProgressSpinner is a process status indicator.

Usage#

import { ProgressSpinner } from 'primereact/progressspinner';
<ProgressSpinner />

Examples#

Basic#

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>
    );
}

Custom#

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>
    );
}

Accessibility#

Screen Reader#

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

<ProgressSpinner aria-label="Loading" />

Keyboard Support#

Component does not include any interactive elements.