---
title: Progress
description: A linear progress row built on TxProgressBar.
category: Feedback
status: beta
since: 0.3.4
tags: [progress, status, loading]
syncStatus: reviewed
verified: true
---

## Usage

### States
`status` sets the status color.
::::TuffDemoWrapper{demo="ProgressProgressStatesDemo" code-lang="vue"}
---
code: |
  <template>
    <TuffProgress :percentage="40" />
    <TuffProgress :percentage="72" status="warning" />
    <TuffProgress :percentage="100" status="success" />
  </template>
---
::::

### Progress Row
::::TuffDemoWrapper{demo="ProgressProgressRowDemo" code-lang="vue"}
---
code: |
  <template>
    <TuffProgress :percentage="60" />
    <TxStatusBadge text="Running" status="warning" />
  </template>
---
::::

### Custom Text

```vue
<template>
  <TuffProgress :percentage="42" :format="value => `Done ${value}%`" />
</template>
```

### Indeterminate

```vue
<template>
  <TuffProgress indeterminate :percentage="60" :show-text="false" />
</template>
```

### Best Practices

- Use `TuffProgress` for simple row progress; use `TxProgressBar` directly for segments, tooltips, messages, loading/success/error states, flow effects, or custom text placement.
- Keep `strokeWidth` modest; this component is for row-level progress, not hero metrics.
- For work of unknown duration, use `indeterminate` and hide the text unless the value is trustworthy; never show a stale percentage.
- Pair the bar with a short status label when the surrounding UI needs operational context.

## API Reference

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `percentage` | `number` | `0` | Determinate progress value. |
| `status` | `'success' \| 'error' \| 'warning' \| ''` | `''` | Status color. |
| `strokeWidth` | `number` | `6` | Bar height in px. |
| `showText` | `boolean` | `true` | Shows the text outside the bar. |
| `indeterminate` | `boolean` | `false` | Indeterminate mode. |
| `format` | `(percentage: number) => string` | - | Custom text for determinate progress. |

## Overview

- It renders `TxProgressBar` with no wrapper DOM and forwards `percentage`, `status`, `indeterminate`, `showText`, and `format` as-is.
- `strokeWidth` becomes `height` (such as `"6px"`); text placement is fixed to `outside` and the mask to `maskVariant="plain"`.
- It emits no events and has no slots; the host drives progress by updating props.
- Determinate progress gets `role="progressbar"` and `aria-valuenow` from `TxProgressBar`; indeterminate progress omits `aria-valuenow`.

## Technologies

- The install entry registers the component name `TuffProgress`.
- Source: `packages/tuffex/packages/components/src/progress/`.

<TuffDocSourceLink />