Ringbar

Progressbar but circular

Usage

Simple Usage

preview

<template>
  <p-ringbar value="15" />
  <p-ringbar value="25" />
  <p-ringbar value="50" />
  <p-ringbar value="75" />
  <p-ringbar value="100" />
</template>

With Input Range

preview

<template>
  <p-input-range v-model="value" />
  <p-ringbar :value="value" />
</template>

<script lang="ts" setup>
const value = ref(50)
</script>

Sizing

preview

<template>
  <p-ringbar value="75" size="xs" />
  <p-ringbar value="75" size="sm" />
  <p-ringbar value="75" size="md" />
  <p-ringbar value="75" size="lg" />
</template>

Indeterminate Mode

preview

<template>
  <p-ringbar indeterminate />
</template>

API

Props

Props	Type	Default	Description
size	String	md	Ring size, valid value: xs, sm, md, lg
min	Number	0	Lowest progress value
max	Number	100	Highest progress value
value	Number	-	Progress value
indeterminate	Boolean	false	Enable indterminate mode

Slots

Name	Description
There no slots here

Events

Name	Arguments	Description
There no props here

See Also

• Progressbar
• Spinner