useProgressSpinner

Usage#

import { useProgressSpinner } from '@primereact/headless/progressspinner';

const { rootProps, circleProps, circleTrackProps, circleRangeProps, state } = useProgressSpinner({
    value: 75
});
 
<div {...rootProps}>
    <svg {...circleProps}>
        <circle {...circleTrackProps} />
        <circle {...circleRangeProps} />
    </svg>
</div>;

useProgressSpinner manages numeric value state with SVG circle geometry computation for both determinate and indeterminate progress indicators, see Primitive for a component-based API.

Features#

• SVG geometry, computes radius, circumference, and stroke-dasharray/stroke-dashoffset from value, min, and max
• Determinate and indeterminate, switches modes automatically based on whether value is provided
• Configurable stroke and bounds, strokeWidth, min, and max all feed into the geometry calculation
• Reactive state, state.value, state.percent, and state.indeterminate drive custom labels or overlays
• Data-driven styling, data-state="indeterminate" makes it easy to attach spin animations in CSS

Working with callbacks#

Determinate vs indeterminate#

Omit value (or pass null) to show an indeterminate spinner; provide a numeric value for a determinate indicator.

const indeterminate = useProgressSpinner();
const determinate = useProgressSpinner({ value: 75 });

Custom range#

Set min and max so the percentage is computed against your actual domain, not 0-100.

const progress = useProgressSpinner({ value: 150, min: 0, max: 200 });
 
progress.state.percent; // 75

Rendering custom labels#

Read state.percent and state.indeterminate to layer a label on top of the SVG without recomputing geometry.

const progress = useProgressSpinner({ value: 75 });
 
<span>{Math.round(progress.state.percent)}%</span>;
{
    progress.state.indeterminate && <span>Loading...</span>;
}

Adjusting stroke thickness#

strokeWidth feeds directly into the circle geometry, so thicker strokes stay visually centered without manual tweaks.

const progress = useProgressSpinner({ value: 75, strokeWidth: 8 });

Styling with data attributes#

Every prop object includes data-scope="progress" and a data-part attribute. State-dependent attributes are added automatically.

[data-scope='progress'][data-part='circleTrack'] {
    stroke: var(--p-content-border-color);
}
 
[data-scope='progress'][data-part='circleRange'] {
    stroke: var(--p-primary-color);
}
 
[data-scope='progress'][data-state='indeterminate'] svg {
    animation: spin 2s linear infinite;
}

API#

useProgressSpinner#

Accessibility#

Announced as an indeterminate progress indicator via aria-busy. See Primitive for full WAI-ARIA compliance details.