Progress

Displays an indicator showing the completion progress of a task — as a bar, a segmented bar, a ring or a gauge.

Usage

@Local progress: number = 13;

aboutToAppear() {
  setTimeout(() => this.progress = 66, 500);
}

SProgress({ value: this.progress })

Approximate web preview — the HarmonyOS rendering is the reference.

Sizes

sizing: 'sm' | 'default' | 'lg', or any thickness; showValue adds the percentage.

SProgress({ value: 40, sizing: 'sm' })
SProgress({ value: 55 })
SProgress({ value: 70, sizing: 'lg', showValue: true })
SProgress({ value: 30, thickness: 2 })

Approximate web preview — the HarmonyOS rendering is the reference.

Tones

default | success | warning | info | destructive; valueText replaces the percentage.

SProgress({ value: 80, tone: 'success', showValue: true })
SProgress({ value: 55, tone: 'warning', showValue: true })
SProgress({ value: 35, tone: 'info', showValue: true })
SProgress({ value: 92, tone: 'destructive', valueText: '92 GB' })

Approximate web preview — the HarmonyOS rendering is the reference.

Buffer, stripes, steps, indeterminate

The indeterminate bar slides forever on its own node; toggle it to see it stop.

SProgress({ value: 35, buffer: 70, sizing: 'sm' })      // buffered media
SProgress({ value: 60, sizing: 'lg', striped: true })
SProgress({ value: 45, sizing: 'lg', striped: true, animated: true, tone: 'info' })
SProgress({ value: 3, max: 5, segments: 5, valueText: 'Step 3 of 5' })
SProgress({ indeterminate: true, label: 'Loading' })

Approximate web preview — the HarmonyOS rendering is the reference.

Circle

shape: 'circle' — size, thickness, value / caption / custom centre, indeterminate spin.

SProgress({ shape: 'circle', value: 72, sizing: 'sm' })
SProgress({ shape: 'circle', value: 72, showValue: true })
SProgress({ shape: 'circle', value: 72, sizing: 'lg', showValue: true, caption: 'Storage', tone: 'success' })
SProgress({ shape: 'circle', value: 4, max: 10, diameter: 80, thickness: 10 }) {
  Text('4/10')
}
SProgress({ shape: 'circle', indeterminate: true, sizing: 'sm' })

Approximate web preview — the HarmonyOS rendering is the reference.

Gauge

shape: 'gauge' — a 240° meter for levels and quotas.

SProgress({ shape: 'gauge', value: 48, showValue: true, caption: 'CPU', sizing: 'lg' })
SProgress({ shape: 'gauge', value: 82, valueText: '82°', caption: 'Temp', sizing: 'lg', tone: 'destructive' })

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SProgress

shadcn-vue Progress, extended with the forms a design system usually needs.

• linear (default): h-2 w-full rounded-full bg-primary/20 track, bg-primary indicator whose width animates to value / max. Extras: sizing / thickness, buffer (a lighter second bar, e.g. buffered video), striped (+ animated), segments (a stepped bar of N parts) and indeterminate (a sliding bar).
• circle: a ring (diameter, thickness) with the value (showValue / valueText), a caption or any slot content in its centre; indeterminate spins a quarter arc.
• gauge: a 240° meter with the same centre content.

tone colours the indicator: default (primary) | success | warning | info | destructive.

Infinite motion (indeterminate, moving stripes) lives on its own child node and stops when that node is removed; with motion disabled (--motion-progress-enabled: false) a static state is shown instead.

Prop	Type	Default	Description
value	number	0	0…max
max	number	100
label	string | undefined	undefined	Accessible name.
shape	ProgressShape ProgressShape = 'linear' | 'circle' | 'gauge'	'linear'
sizing	ProgressSize ProgressSize = 'sm' | 'default' | 'lg'	'default'
thickness	number | undefined	undefined	Bar height / ring stroke in vp; overrides the sizing preset.
diameter	number | undefined	undefined	Ring / gauge diameter in vp; overrides the sizing preset.
tone	SparkTone SparkTone = 'default' | 'success' | 'warning' | 'info' | 'destructive'	'default'
indeterminate	boolean	false	Unknown duration: sliding bar (linear) or spinning arc (circle).
buffer	number | undefined	undefined	linear: secondary (buffered) value, 0…max, drawn lighter behind the indicator.
striped	boolean	false	linear: diagonal stripes on the indicator.
animated	boolean	false	linear + striped: the stripes move.
segments	number	0	linear: split the track into N equal parts (steps). 0 = continuous.
showValue	boolean	false	Show the value: right of a bar, in the centre of a ring / gauge.
valueText	ResourceStr | undefined	undefined	Custom value text (default "66%"). Implies showValue.
caption	ResourceStr | undefined	undefined	ring / gauge: small muted text under the value.
tokens	ProgressTokens	{}	Per-instance token overrides, see {@link ProgressTokens}.

Slots: children (trailing closure)