Progress

Radix Progress with animated fill, optional glow effects, and flexible value labels.

progress
0%
0px

Customize

Edit props; preview updates instantly.

Customize
Value
60%
Size
Animation
Effect
Glow palette
Value position

Props

Props accepted by Progress.

PropTypeDefaultDescription
valuenumber | null—Current value (0 → `max`). Pass `null` or omit to show the indeterminate shuttle loop.
maxnumber100Maximum value. The indicator fills to `value / max`.
size"sm" | "md" | "lg""md"Visual size preset — controls bar height.
animation"spring" | "smooth" | "wobble""spring"Curve used when `value` changes. `spring` is balanced; `smooth` is a clean ease-out tween; `wobble` is bouncy / underdamped.
effect"none" | "stripes" | "glow" | "pulse""none"Visual treatment of the indicator. `stripes` paints a moving barber-pole. `glow` replaces the white fill with a gradient through `glowColors` and modulates brightness directionally — bright pulse when the value rises, dim pulse when it falls. `pulse` dims the fill rhythmically.
glowPalette"default" | "rainbow" | "warm" | "cool" | string[]"default"Palette used by the `glow` effect. Pass a preset name for a built-in template (`default` is `["#f7f7f7", "#e100ff"]`; `rainbow` is 7 hues; `warm` and `cool` are 3-color sets) — or pass your own array of CSS colors for full control. The gradient sits inside the white fill and only lights up while the value is changing.
valuePosition"hidden" | "end" | "above-leading" | "inside-leading" | "edge-leading""hidden"Where to render the live value label. `end` floats above the bar right-aligned; `above-leading` floats above the bar and x-tracks the fill's leading edge; `inside-leading` sits inside the fill anchored to its leading edge (the bar auto-grows to fit the text); `edge-leading` is a pill chip straddling the bar's top border at the leading edge. Floating labels counter-translate so they stay inside the track at both ends. All positions stream their text frame-by-frame via a DOM ref — no React re-renders.
formatValue(value: number, max: number) => stringv => `${Math.round((v / max) * 100)}%`Custom formatter for the displayed label.
getValueLabel(value: number, max: number) => string—Screen-reader label (`aria-valuetext`). Forwarded to the Radix primitive.
trackClassNamestring—Extra class names merged onto the track (outer bar).
indicatorClassNamestring—Extra class names merged onto the indicator (the fill).
valueClassNamestring—Extra class names merged onto the value label span.
classNamestring—Extra class names merged onto the outermost element. When a floating label is rendered (`end`, `above-leading`, `edge-leading`), this is the wrapper that the label is positioned against — so width constraints (e.g. `max-w-sm`) anchor the label correctly to the bar's outer frame.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/progress.json

Usage

Import the component and drop it into a render.

demo.tsx13 lines
import { Progress } from "@/components/lazy-ui/progress";

export function Demo() {
  return (
    <Progress
      value={62}
      animation="spring"
      effect="glow"
      valuePosition="edge-leading"
      className="w-72"
    />
  );
}

Credits

Radix ProgressAccessible progress semantics and primitive structure.Motion for ReactMotion values drive the fill and live value label.