---
url: "https://vueda.dev/v3/reference/theming/keys/Progress.md"
title: "Progress"
---

# 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](/v3/reference/api/vue/Progress.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/Progress.md#theme-key-Progress-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](/v3/reference/theming/keys/Progress.md#theme-key-Progress-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. |

<a id="theme-key-Progress-root"></a>

## 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:

```javascript
({ 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`

<a id="theme-key-Progress-indicator"></a>

## 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:

```javascript
({ 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`