Halo Progress

Renders a progress bar with a sliding gradient strip for indeterminate state and a scale-based fill for determinate state. It uses animated transitions and matches a frosted design style. Use it for async flows or inline status indicators.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/halo-progress

npx layro-cli add @nolly-studio/halo-progress

npx layro-cli add @nolly-studio/halo-progress

bunx layro-cli add @nolly-studio/halo-progress

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

/**
 * Progress bar for async flows and inline status (pairs with polished toast / notification).
 * Determinate fill uses `scaleX` (transform) — not animated `width`. Indeterminate uses a
 * sliding gradient strip. Styling aligns with {@link HaloSegmented} frosted + rim chrome.
 */
import { useMemo, type ComponentProps, type ReactNode } from "react"
import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
import { motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/** Matches `layoutSpring` in `halo-button.tsx` / `halo-segmented.tsx`. */