Progress

Source: client/lib/theme/vueda-tailwind/feedback/index.js

The progress track surface and clipping frame. It sets the canonical 8px default height, optional compact or large heights, and status track tints.

Vue component: Progress

Slot	Default classes	Description
root	callback	The progress track surface and clipping frame. It sets the canonical 8px default height, optional compact or large heights, and status track tints.
indicator	callback	The moving progress fill. Determinate values are translated by the component inline style, while indeterminate progress narrows the fill and uses the --animate-vueda-progress-slide animation.

root

The progress track surface and clipping frame. It sets the canonical 8px default height, optional compact or large heights, and status track tints.

Callback:

({ size, tone }) => ({
            class: [
                "relative w-full overflow-hidden rounded-full",
                {
                    "h-1": size === "sm",
                    "h-2": !size || size === "md",
                    "h-3": size === "lg",
                    "bg-primary/20": !tone,
                    "bg-success/20": tone === "success",
                    "bg-warning/20": tone === "warning",
                    "bg-destructive/20": tone === "destructive",
                },
            ],
        })

Source: client/lib/theme/vueda-tailwind/feedback/Progress.theme.js:18

indicator

The moving progress fill. Determinate values are translated by the component inline style, while indeterminate progress narrows the fill and uses the --animate-vueda-progress-slide animation.

Callback:

({ tone }) => ({
            class: [
                "h-full w-full flex-1 transition-all",
                "data-[state=indeterminate]:w-2/5 data-[state=indeterminate]:animate-vueda-progress-slide",
                {
                    "bg-primary": !tone,
                    "bg-success": tone === "success",
                    "bg-warning": tone === "warning",
                    "bg-destructive": tone === "destructive",
                },
            ],
        })

Source: client/lib/theme/vueda-tailwind/feedback/Progress.theme.js:35