ProgressCircle

Usage

import { ProgressCircle } from '@hareui/vue'

<script setup lang="ts">import { ProgressCircle } from '@hareui/vue'</script><template>  <ProgressCircle aria-label="Loading" :value="60" /></template>

HeroUI's ProgressCircle.Track, ProgressCircle.TrackCircle and ProgressCircle.FillCircle parts are rendered by the component: an SVG with a background circle and a progress arc. It is built on Reka UI's ProgressRoot, with React Aria's aria-value* semantics.

<ProgressCircle aria-label="Loading" :value="60" />

ui keys: base, track, trackCircle, fillCircle.

Examples

Sizes

<script setup lang="ts">import { ProgressCircle } from '@hareui/vue'</script><template>  <div class="flex items-center gap-6">    <ProgressCircle aria-label="Loading" size="sm" :value="40" />    <ProgressCircle aria-label="Loading" size="md" :value="60" />    <ProgressCircle aria-label="Loading" size="lg" :value="80" />  </div></template>

Colors

<script setup lang="ts">import { ProgressCircle } from '@hareui/vue'</script><template>  <div class="flex items-center gap-6">    <ProgressCircle aria-label="Default" color="default" :value="60" />    <ProgressCircle aria-label="Accent" color="accent" :value="60" />    <ProgressCircle aria-label="Success" color="success" :value="60" />    <ProgressCircle aria-label="Warning" color="warning" :value="60" />    <ProgressCircle aria-label="Danger" color="danger" :value="60" />  </div></template>

Indeterminate

Use indeterminate when progress cannot be determined.

<script setup lang="ts">import { ProgressCircle } from '@hareui/vue'</script><template>  <ProgressCircle aria-label="Loading" indeterminate /></template>

With Label

75% Complete

<script setup lang="ts">import { Label, ProgressCircle } from '@hareui/vue'</script><template>  <div class="flex items-center gap-3">    <ProgressCircle aria-label="Loading" :value="75" />    <Label>75% Complete</Label>  </div></template>

Custom SVG Props

Use stroke-width to change the thickness of both circles; the radius follows (18 - strokeWidth / 2 in the 36×36 viewBox), so the circle always fits the SVG.

<script setup lang="ts">import { ProgressCircle } from '@hareui/vue'</script><template>  <div class="flex items-end gap-6">    <ProgressCircle aria-label="Thin circle" :stroke-width="2" :value="60" />    <ProgressCircle aria-label="Default circle" :value="60" />    <ProgressCircle aria-label="Thick circle" :stroke-width="6" :value="60" />  </div></template>

Customization

Tailwind CSS

Use the class prop for the root and the ui prop for the SVG and its circles:

<script setup lang="ts">import { ProgressCircle } from '@hareui/vue'</script><template>  <ProgressCircle    aria-label="Sync progress"    class="size-14 text-neutral-700 dark:text-neutral-300"    :ui="{      trackCircle: 'stroke-neutral-200 dark:stroke-neutral-800',      fillCircle: 'stroke-neutral-700 dark:stroke-neutral-300',    }"    :value="68"  /></template>

Global theme override

Override the progressCircle theme app-wide with createHareUI:

app.use(createHareUI({
  ui: {
    progressCircle: {
      slots: {
        base: 'inline-flex',
        track: 'size-12',
        fillCircle: 'stroke-[purple]',
      },
    },
  },
}))

Styling Reference

Each rendered element carries the same data-slot string as HeroUI, so selectors translate 1:1.

`ui` key	`data-slot`	Description
`base`	`progress-circle`	Base container
`track`	`progress-circle-track`	SVG element
`trackCircle`	`progress-circle-track-circle`	Background circle
`fillCircle`	`progress-circle-fill-circle`	Progress arc

HeroUI's modifier classes correspond to props (HareUI renders utilities, not BEM classes, so style through class, ui or createHareUI):

size: sm, md (default), lg (.progress-circle--{size})
color: default, accent (default), success, warning, danger (.progress-circle--{color})

API Reference

Props

Prop	Type	Default	Description
`value`	`number`	`0`	The current value (clamped to `minValue`–`maxValue`).
`minValue`	`number`	`0`	The minimum value.
`maxValue`	`number`	`100`	The maximum value.
`indeterminate`	`boolean`	`false`	Whether progress is indeterminate (a quarter arc spins).
`formatOptions`	`Intl.NumberFormatOptions`	`{ style: 'percent' }`	Number format for `aria-valuetext`. Percent formats the fraction of the range.
`valueLabel`	`string`	-	Custom value text (e.g. `'3 of 4'`) for `aria-valuetext`.
`strokeWidth`	`number`	`4`	Stroke width of both circles in the 36×36 viewBox; the radius follows as `18 - strokeWidth / 2`.
`size`	`"md" \| "sm" \| "lg"`	`'md'`	Size of the circle.
`color`	`"default" \| "accent" \| "success" \| "warning" \| "danger"`	`'accent'`	Color of the progress arc.
`ui`	`ComponentSlots<{ slots: { base: string[]; track: string; trackCircle: string; fillCircle: string; }; variants: { color: { default: { base: string; }; accent: { base: string; }; success: { base: string; }; warning: { base: string; }; danger: { base: string; }; }; size: { sm: { track: string; }; md: {}; lg: { track: string; }; }; indeterminate: { true: { track: string; }; }; }; defaultVariants: { color: string; size: string; }; }>`	-	Per-slot class overrides.