Tuff
|Docs
Components/Progress

Progress

A linear progress row built on TxProgressBar.

VerifiedSince 0.3.4

Usage

States

status sets the status color.

Loading demo...

Progress Row

Loading demo...

Custom Text

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

Indeterminate

<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

PropTypeDefaultDescription
percentagenumber0Determinate progress value.
status'success' | 'error' | 'warning' | ''''Status color.
strokeWidthnumber6Bar height in px.
showTextbooleantrueShows the text outside the bar.
indeterminatebooleanfalseIndeterminate 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/.
查看源码
packages/tuffex/packages/components/src/progress/index.ts