DocumentationNuxt Charts v3
Progress Circle
Display circular progress indicators with the ProgressCircle component.
Use ProgressCircle to display a numeric value as circular progress. It requires Vue and Tailwind CSS, inherits Nuxt UI colors when available, and has no application state or notifications.
Example
Here’s an example of the ProgressCircle in action, displaying simple progress.
88%
<div class="flex flex-col items-center justify-center space-y-2">
<ProgressCircle
:value="88"
:size="80"
:stroke-width="8"
:show-label="true"
/>
<span class="text-center">Progress Example</span>
</div>
nuxt-charts add ProgressCircle
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | Required | The progress value between zero and max |
size | number | 50 | The diameter of the circle in pixels |
stroke-width | number | 5 | The thickness of the progress stroke |
show-label | boolean | true | Whether to display the percentage label |
max | number | 100 | Upper bound. Values are clamped between zero and this value. |
color | string | Nuxt UI primary, then Tailwind blue | Progress stroke; accepts a CSS color or variable. |
trackColor | string | Nuxt UI accented background, then Tailwind gray | Track stroke color. |
textColor | string | Inherited text color | Label color. |
textSize | string | undefined | CSS font size for the label. |
duration | number | 500 | Transition duration in milliseconds. Respects reduced motion. |
linecap | 'butt' | 'round' | 'square' | 'round' | Progress stroke end shape. |
label | string | 'Progress' | Accessible name for the progress bar. |
Custom Label
The default slot receives value and percentage:
<ProgressCircle :value="42" :max="60" color="var(--ui-success)">
<template #default="{ value }">{{ value }}/60</template>
</ProgressCircle>