useProgress

Animated progress hook that automatically advances from initialValue to 100 over the configured time (time). Useful for indeterminate loading bars or simple progress animations.

When time is null, the interval is not created — progress stays frozen at the initial value.

When to use

✅ Use when…	🚫 Avoid when…
In indeterminate loading progress bars (a fallback while the real task finishes). In simple visual onboardings/timers.	For real deterministic progress (use the task's own value). When you need to pause/resume/reset dynamically — the hook exposes no external control.

Signature

const progress = useProgress(
  initialValue?: number,
  increment?: 1 | 5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50,
  time?: number | null,
);

Example

import { useProgress } from '@apollion-dsi/core/hooks';
 
function Loader() {
  const value = useProgress(0, 5, 2000);
  return <progress value={value} max={100} />;
}

useProgress

When to use

Signature

Example

See also