ProgressSpinner

ProgressSpinner is a process status indicator.

basic-demo

Usage#

import { ProgressSpinner } from '@primereact/ui/progressspinner';

<ProgressSpinner />

Examples#

Custom#

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

custom-demo

import { ProgressSpinner } from '@primereact/ui/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>
    );
}

Accessibility#

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#