Installation
Usage
import { ProgressiveFluxLoader } from "@/components/ruixen/progressive-flux-loader";
export default function App() {
return <ProgressiveFluxLoader duration={7} loop />;
}Controlled
Drive the loader from real progress. Phase labels switch automatically based on the configured thresholds.
<ProgressiveFluxLoader
value={progress}
phases={[
{ at: 0, label: "uploading" },
{ at: 40, label: "processing" },
{ at: 80, label: "almost there" },
{ at: 100, label: "done" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | undefined | Controlled progress (0–100). When omitted, the loader runs an internal demo loop. |
phases | { at: number; label: string }[] | built-in set | Progress thresholds and the label to show once they're reached. |
duration | number | 12 | Seconds for one full sweep when uncontrolled. |
loop | boolean | true | Restart from 0 after reaching 100% (uncontrolled mode). |
onComplete | () => void | undefined | Fires once when progress reaches 100%. |
className | string | - | Wrapper classes. |
barClassName | string | - | Classes for the track. |
textClassName | string | - | Classes for the phase label. |
Features
- Z-axis text transition — every label change pushes the old text toward the viewer while the new one zooms in from far away, overshoots forward, then settles.
- Letter-by-letter reveal — each character of the new label cascades in with a soft blur-clear.
- iOS-style flux gradient — multi-stop blue → cyan → blue fill with a moving shine sweep and a gentle glow.
- Controlled or autonomous — drive it with real progress or let it loop on its own as a status indicator.
- Theme-aware — track adapts to light and dark themes via shadcn neutral tokens.