Progress Bar

Linear progress indicator.

Import

import { ProgressBar } from '@heroui-vue/vue'

Usage

Component migration58%

Indeterminate task

<template>
  <div class="grid w-full max-w-md gap-4">
    <ProgressBar label="Component migration" :value="58" />
    <ProgressBar label="Indeterminate task" color="warning" />
  </div>
</template>

<script setup>
import { ProgressBar } from '@heroui-vue/vue'
</script>

API

Prop	Type	Default	Description
value	number | undefined	undefined	Current value; omit for indeterminate state
color	'default' | 'accent' | 'success' | 'warning' | 'danger'	'accent'	Fill color
size	'sm' | 'md' | 'lg'	'md'	Track size