Progress Circle

Circular progress indicator.

Import

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

Usage

<template>
  <div class="flex items-center gap-5">
    <ProgressCircle :value="32" size="sm" />
    <ProgressCircle :value="68" color="success" />
    <ProgressCircle color="warning" size="lg" />
  </div>
</template>

<script setup>
import { ProgressCircle } 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'	Stroke color
size	'sm' | 'md' | 'lg'	'md'	Circle size