Preview

Installation

npx sigma-ui@latest add progress

Usage

<script setup lang="ts">
import { ref } from 'vue';
import { Progress } from '@/components/ui/progress';

const progress = ref(50);
</script>

<template>
  <Progress v-model="progress" />
</template>

v-model is the completed percentage, from 0 to 100. The indicator animates when the value changes.

Examples

Animated

Update the value over time, for example while a file uploads.

<script setup lang="ts">
import { onBeforeUnmount, ref } from 'vue';
import { Progress } from '@/components/ui/progress';

const progress = ref(0);

const interval = setInterval(() => {
  progress.value = progress.value >= 100 ? 0 : progress.value + 10;
}, 500);

onBeforeUnmount(() => clearInterval(interval));
</script>

<template>
  <Progress v-model="progress" />
</template>

API Reference

Progress

Props

Prop	Type	Default
modelValue The progress value. Can be bind as v-model.	number | null	0
max The maximum progress value.	number	-
getValueLabel A function to get the accessible label text in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.	((value: number | null, max: number) => string)	-
getValueText A function to get the accessible value text representing the current value in a human-readable format.	((value: number | null, max: number) => string)	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Accessibility

Renders an element with the progressbar role. Reka UI sets aria-valuenow, aria-valuemin, and aria-valuemax from the value. It has no keyboard interactions.

Key	Description
None	Progress is not focusable.