UIProgress

UIProgress

A progress indicator component for displaying completion status.

<template>
  <UIProgress
    :percentage="progress"
    :status="status"
    :strokeWidth="8"
    :showInfo="true"
  >
    <template #format="{ percentage }">
      {{ percentage }}% Complete
    </template>
  </UIProgress>
</template>

<script setup lang="ts">
const progress = ref(75)
const status = computed(() => {
  if (progress.value === 100) return 'success'
  if (progress.value < 30) return 'exception'
  return 'normal'
})
</script>

Props

• percentage (number): Progress percentage (0-100)
• type (‘line’ | ‘circle’ | ‘dashboard’): Progress type
• status (‘success’ | ‘exception’ | ‘normal’): Progress status
• strokeWidth (number): Progress bar width
• strokeColor (string | object): Progress bar color
• trailColor (string): Trail color
• showInfo (boolean): Show percentage info
• width (number): Circle/dashboard width
• strokeLinecap (‘round’ | ‘square’): Progress bar end type
• textInside (boolean): Show text inside progress bar

Events

• update:percentage: Emitted when percentage changes

Slots

• format: Custom percentage format
• prefix: Content before progress bar
• suffix: Content after progress bar