Progress

<ts-progress> vv0.4.0

The ts-progress component.

Open in Storybook for interactive demos.

Preview

<ts-progress max="100" size="md" value="0"></ts-progress>

Properties

Property	Attribute	Type	Default	Description
indeterminate	indeterminate	boolean	false	Whether the progress is indeterminate.
label	label	string | undefined	—	Accessible label for the progress bar.
max	max	number	100	Maximum value.
showValue	show-value	boolean	false	Whether to display the percentage value.
size	size	"lg" | "md" | "sm" | "xl" | "xs"	'md'	The size of the progress bar.
value	value	number	0	Current progress value (0 to max).
variant	variant	"danger" | "info" | "primary" | "success" | "warning"	'primary'	The color variant.

CSS Parts

Use ::part() to style internal elements:

Part	Description
fill	The progress fill bar.
label	The value label text.
track	The progress track.

ts-progress::part(fill) {
  /* your custom styles */
}

Usage

HTML

<ts-progress max="100" size="md" value="0"></ts-progress>

React

import { TsProgress } from '@tessera-ui/react';

<TsProgress max="100" size="md"></TsProgress>