ProgressSpinner

ProgressSpinner is a process status indicator that supports both determinate and indeterminate modes.

Game completed

The legend of Zelda

Tears of the Kingdom

preview

Usage#

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

<ProgressSpinner.Root>
    <ProgressSpinner.Track />
    <ProgressSpinner.Range />
</ProgressSpinner.Root>

Examples#

Indeterminate#

An animated spinner indicating an indeterminate loading state. This is the default mode when no value is provided.

basic-demo

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

export default function BasicDemo() {
    return (
        <div className="flex justify-center">
            <ProgressSpinner.Root aria-label="Loading">
                <ProgressSpinner.Track />
                <ProgressSpinner.Range />
            </ProgressSpinner.Root>
        </div>
    );
}

Determinate#

Set a numeric value prop to display a determinate progress indicator with a track and range.

determinate-demo

'use client';
import { ProgressSpinner } from '@primereact/ui/progressspinner';
import { useState } from 'react';

export default function DeterminateDemo() {
    const [value] = useState(75);

    return (
        <div className="flex justify-center">
            <ProgressSpinner.Root value={value} aria-label="Progress">
                <ProgressSpinner.Track />
                <ProgressSpinner.Range />
                <ProgressSpinner.Value />
            </ProgressSpinner.Root>
        </div>
    );
}

API#

Sub-Components#

See Primitive API for ProgressSpinner component documentation.

Hooks#

See Headless API for useProgressSpinner hook documentation.

Accessibility#

See ProgressSpinner Primitive for WAI-ARIA compliance details and keyboard support.