Progress Bar

A component to display progress.

Source

Installation

npx @rahimstack@latest add progress-bar

Usage

Indeterminate

API Reference

const ProgressBarAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-ProgressBar__root",
        "relative w-full overflow-hidden rounded-full bg-[--subtle] translate-z-0",
    ], {
        variants: {
            size: {
                sm: "h-2",
                md: "h-3",
                lg: "h-4",
                xl: "h-6",
            },
        },
        defaultVariants: {
            size: "md",
        },
    }),
    indicator: cva([
        "UI-ProgressBar__indicator",
        "h-full w-full flex-1 bg-brand transition-all flex items-center justify-center relative",
    ], {
        variants: {
            isIndeterminate: {
                true: "animate-indeterminate-progress origin-left-right",
                false: null,
            },
        },
        defaultVariants: {
            isIndeterminate: false,
        },
    }),
})