Command Palette

Search for a command to run...

Docs
Progressive Flux Loader

Progressive Flux Loader

A glowing progress bar with phase labels that fly in along the Z-axis and reveal letter by letter.

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" },
  ]}
/>

Custom fill

The bar ships with a vivid blue → cyan flux fill. Recolor it without touching the component by setting the --flux-from / --flux-to CSS variables.

// Tweak the two flux colors
<ProgressiveFluxLoader className="[--flux-from:#7c3aed] [--flux-to:#e879f9]" />
 
// Or point them at your theme's primary so the bar follows the theme
<ProgressiveFluxLoader className="[--flux-from:hsl(var(--primary))] [--flux-to:hsl(var(--primary))]" />

For full control, pass the gradient prop to replace the fill background entirely:

<ProgressiveFluxLoader gradient="linear-gradient(90deg, #f97316 0%, #facc15 55%, #f97316 100%)" />

Props

PropTypeDefaultDescription
valuenumberundefinedControlled progress (0–100). When omitted, the loader runs its own looping sweep.
phases{ at: number; label: string }[]built-in setProgress thresholds and the label to show once each is reached.
durationnumber12Seconds for one full sweep when uncontrolled.
loopbooleantrueRestart from 0 after reaching 100% (uncontrolled mode).
showLabelbooleantrueShow the animated phase label above the bar.
gradientstringvivid blue → cyan fluxCSS background for the bar fill. Pass any gradient/color to restyle it.
onComplete() => voidundefinedFires once when progress reaches 100% — in both controlled and uncontrolled modes.
classNamestring-Wrapper classes.
barClassNamestring-Classes for the track.
textClassNamestring-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.
  • Signature flux fill — a vivid blue → cyan gradient with a moving sheen and colored glow. Recolor it via the --flux-from / --flux-to CSS variables (or the gradient prop) — point them at --primary to follow your theme. The track and label use shadcn tokens, so the loader still adapts to light and dark.
  • Controlled or autonomous — drive it with real progress (with an onComplete callback) or let it loop on its own as a status indicator.
  • Accessible — exposes a progressbar role with live aria-valuenow / aria-valuetext; the decorative animated label is hidden from assistive tech.
  • Reduced-motion aware — respects prefers-reduced-motion, dropping the fly-in, letter cascade, and looping sheen for a calm static render.
Solar LoaderFine Tune Slider