Progress

Linear progress shows stages and rhythm of work.
Status: Beta

Demo

Progress States

Base progress with status colors

 Copy<template>
  <TuffProgress :percentage="40" />
  <TuffProgress :percentage="72" status="warning" />
  <TuffProgress :percentage="100" status="success" />
</template>

Basic Usage

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

Interaction Contract

TuffProgress is the lightweight entry for standard progress rows. It forwards percentage, status, stroke width, indeterminate state, and text formatting to the current TxProgressBar implementation. Determinate progress exposes role="progressbar" with aria-valuenow; indeterminate progress omits aria-valuenow.

API (Lite)

Composite Patterns

Progress Row

Progress paired with status label.

 Copy<template>
  <TuffProgress :percentage="60" />
  <TxStatusBadge text="Running" status="warning" />
</template>