Progress

The Progress component displays the current progress of an operation or task, helping users understand the processing status.

Basic Usage

Use v-model for two-way binding, or :value for a static value. Default max=100.

<!-- Static value -->
<TProgress :value="75" />

<!-- Two-way binding -->
<TProgress v-model:value="progVal" showLabel />

Colors

Set the progress bar color via the color prop. Supports all Tabler preset colors.

<TProgress :value="75" color="primary" />
<TProgress :value="60" color="success" />
<TProgress :value="45" color="danger" />
<TProgress :value="30" color="warning" />
<TProgress :value="90" color="info" />

Show Label

Enable the showLabel prop to display the percentage text on the progress bar.

<TProgress :value="68" showLabel />

Striped

Enable the striped prop to add a striped animation effect to the progress bar.

<TProgress :value="50" striped showLabel />

Indeterminate

Use the indeterminate prop to show a continuous loading animation when progress is unknown.

<TProgress indeterminate />

Sizes

Use the sm prop for small height (default height is normal).

<TProgress :value="75" sm showLabel />
<TProgress :value="75" showLabel />

Native Element

Enable the native prop to render as a native HTML <progress> element, suitable for scenarios requiring the browser's built-in progress bar.

<TProgress :value="50" native />

Multiple Bars

Nest multiple <TProgressBar> child components inside <TProgress> to create segmented progress bars.

<TProgress>
  <TProgressBar :value="30" color="primary" />
  <TProgressBar :value="50" color="success" />
  <TProgressBar :value="10" color="danger" />
</TProgress>

TProgressBar also supports striped, showLabel, and other props.

<TProgress>
  <TProgressBar :value="40" color="primary" striped showLabel />
  <TProgressBar :value="25" color="warning" />
  <TProgressBar :value="20" color="success" showLabel />
</TProgress>

Programmatic Control

Use step to control how much each call to advance() increases the progress, and initial to set the starting position. Call reset() to return to the initial value. Listen for the @complete event to react when progress reaches max.

advance() and reset() directly modify the v-model binding — no manual event handling needed.

Show Code

<script setup>
const progRef = ref()
const progVal = ref(10)

function onComplete() {
  console.log('Progress reached 100%!')
}
</script>

<template>
  <TProgress ref="progRef" v-model:value="progVal" :initial="10" :step="15" showLabel @complete="onComplete" />
  <t-button @click="progRef?.advance()">Advance (+15)</t-button>
  <t-button @click="progRef?.reset()">Reset</t-button>
</template>

API

TProgress Props

Prop	Description	Type	Default
v-model:value	Current progress value (0–max)	number	0
max	Maximum value	number	100
sm	Whether to use small height	boolean	false
color	Progress bar color	TablerColor	'primary'
striped	Whether to show striped animation	boolean	false
indeterminate	Whether to show indeterminate (looping) state	boolean	false
native	Whether to render as native <progress> element	boolean	false
showLabel	Whether to show the percentage label	boolean	false
step	Step value for advance()	number	10
initial	Starting position, reset() returns to this	number	0

TProgress Methods

Call via template ref.

Method	Returns	Description
advance()	—	Increases progress by step, emits @complete when reaching max
reset()	—	Resets progress to initial
current	number	Reactive ref to the current progress value

TProgress Events

Event	Description
@complete	Emitted when progress reaches max

TProgress Slots

Slot	Description
default	Used to pass multiple <TProgressBar> components for segmented progress.

TProgressBar Props

Prop	Description	Type	Default
value	Current progress value (0–max)	number	Required
max	Maximum value	number	100
color	Progress bar color	TablerColor	'primary'
striped	Whether to show striped animation	boolean	false
indeterminate	Whether to show indeterminate state	boolean	false
showLabel	Whether to show the percentage label	boolean	false