Circular Progress API Reference

Props

Prop	Type	Default	Description
modelValue	Number	0	v-model binding value for progress (0-100)
bgColor	String	'#ddd'	Background color of the progress circle
color	String	'#000'	Color of the progress indicator
indeterminate	Boolean	false	Whether to show indeterminate loading animation
rotate	Number	0	Rotation angle of the progress indicator in degrees
size	Number	100	Size of the circular progress in pixels
width	Number	4	Width of the progress circle stroke in pixels
showValue	Boolean	false	Whether to display the current progress percentage
round	Boolean	false	Whether to use rounded stroke caps for the progress circle

Events

The component doesn't emit any events.

Slots

The component doesn't provide any slots.

Methods

The component doesn't expose any methods via template refs.

Example Usage

Basic Usage

<template>
  <OCircularProgress v-model="progress" color="#4a90e2" :size="100" />
</template>

<script setup>
import { ref } from "vue";
import { OCircularProgress } from "your-component-library";

const progress = ref(75);
</script>

Indeterminate Loading

<template>
  <OCircularProgress indeterminate color="#4a90e2" :size="100" />
</template>

<script setup>
import { OCircularProgress } from "your-component-library";
</script>

With Custom Colors and Size

<template>
  <OCircularProgress
    v-model="progress"
    color="#4a90e2"
    bg-color="#e0e0e0"
    :size="150"
    :width="8"
    show-value
    round
  />
</template>

<script setup>
import { ref } from "vue";
import { OCircularProgress } from "your-component-library";

const progress = ref(60);
</script>

Different Sizes

<template>
  <div class="progress-group">
    <OCircularProgress v-model="progress" :size="50" />
    <OCircularProgress v-model="progress" :size="100" />
    <OCircularProgress v-model="progress" :size="150" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { OCircularProgress } from "your-component-library";

const progress = ref(75);
</script>

With Custom Rotation

<template>
  <OCircularProgress
    v-model="progress"
    :rotate="45"
    color="#4a90e2"
    show-value
  />
</template>

<script setup>
import { ref } from "vue";
import { OCircularProgress } from "your-component-library";

const progress = ref(75);
</script>