chrome

<tc-progress>

Linear or circular progress indicator. Determinate or indeterminate, three sizes, optional inline label.

import "@ra9/tan-compose-kit/progress"

Props

Name	Type	Default	Description
`value`	`number`	`0`	Current progress, between 0 and `max`. Ignored when `indeterminate` is true.
`max`	`number`	`100`	Maximum value.
`variant`	`"linear" \| "circular"`	`"linear"`	Shape.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Linear height or circular diameter.
`indeterminate`	`boolean`	`false`	Cycle indefinitely. Use while waiting for a value to land.
`showLabel`	`boolean`	`false`	Show the percent (or `label`) inline.
`label`	`string`	`""`	Override the auto-generated label.

CSS variables

Variable	Default	Description
`--tc-progress-track`	`var(--tc-color-rule, #ece5d3)`	Track color.
`--tc-progress-fill`	`var(--tc-color-accent, #a16939)`	Fill color.
`--tc-progress-radius`	`999px`	Corner radius.
`--tc-progress-fg`	`var(--tc-color-ink, #14171f)`	Label color.
`--tc-progress-font`	`var(--tc-font-mono, …)`	Label font.

Examples

Linear

<tc-progress value="30"></tc-progress> <tc-progress value="68" showLabel></tc-progress> <tc-progress value="92" size="lg" showLabel></tc-progress> <tc-progress value="50" size="sm"></tc-progress>

Indeterminate

Useful while the page is waiting for a value to arrive — uploads, deploys, dependent fetches.

<tc-progress indeterminate></tc-progress> <tc-progress indeterminate size="lg" showLabel label="Deploying…"></tc-progress>

Circular

<tc-progress variant="circular" value="55" showLabel></tc-progress> <tc-progress variant="circular" value="80" size="lg" showLabel></tc-progress> <tc-progress variant="circular" indeterminate></tc-progress>

Custom max

<tc-progress value="4" max="10" showLabel label="4 of 10 steps"></tc-progress>

Driving from JS

<tc-progress id="upload" value="0" showLabel></tc-progress> <script> const p = document.getElementById("upload"); let v = 0; const t = setInterval(() => { v += 5; p.value = Math.min(100, v); if (v >= 100) clearInterval(t); }, 200); </script>

Accessibility

role="progressbar" with aria-valuenow / valuemin / valuemax (determinate) or aria-valuetext (indeterminate) is wired up for you.
For longer operations, pair with a live region announcement of milestones (e.g., "Uploaded 50%") so screen-reader users get progress feedback without watching the bar.
prefers-reduced-motion: reduce slows indeterminate animation rather than disabling it.

Theming

<tc-progress value="64" showLabel style=" --tc-progress-track: #1c1f26; --tc-progress-fill: #ffc857; --tc-progress-fg: #f5f5f5; " ></tc-progress>

← All components