Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Examples

Default

<script setup>
import { ref, onMounted } from 'vue'
import { Progress } from '@empathyds/vue'

const progress = ref(13)

onMounted(() => {
  const timer = setTimeout(() => (progress.value = 66), 500)
  return () => clearTimeout(timer)
})
</script>

<template>
  <Progress :model-value="progress" class="w-[60%]" />
</template>

Props

Progress

Prop	Type	Default	Description
modelValue	number	0	The progress value.
max	number	100	The maximum value.
getValueLabel	function	-	A function to get the accessible label text for the current value.

Slots

Progress

Slot	Description
default	The content of the progress bar.