Progress

<ts-progress> vv0.6.3

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
animated	animated	boolean	false	Whether to animate the stripes (requires striped to be true).
bufferValue	buffer-value	number | undefined	—	Buffer value for showing buffered/loaded amount (linear only).
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.
striped	striped	boolean	false	Whether to show diagonal stripes on the fill (linear only).
type	type	"circular" | "linear"	'linear'	The type of progress indicator.
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
buffer	The buffer fill bar.
circle-fill	The circular fill ring.
circle-text	The circular percentage text.
circle-track	The circular track ring.
fill	The progress fill bar.
label	The value label text.
svg	The circular SVG element.
track	The progress track.

ts-progress::part(buffer) {
  /* 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>