Menu
Documentation
v4.0.0-beta.4

Progress Circle

<BaseProgressCircle /> · A progression indicator element.

View SourceOpen Issue
vue
<template>
  <BaseProgressCircle
    title="Static progress bar with max value"
    :size="55"
    :model-value="2"
    :max="3"
  />
</template>

Features

  • Supports indeterminate state
  • Provides context for assistive technology
  • Style customization

Anatomy

This component is self closing and can be used to create an animated progress bar.

vue
<template>
  <BaseProgressCircle />
</template>

API Reference

This component has props that you can use to modify its visual style.

Model Type
model-value
number | null

The progress value. Can be bind as `v-model`.

Prop Type
size
default:60
number

The size of the progress circle.

thickness
default:4
number

The thickness of the progress circle.

animation
default:2
number | boolean

Enable/disable animation, or set the animation duration (in seconds).

variant
default:"default"
"default" | "primary" | "dark" | "none"

Defines the variant of the progress circle

max
default:-
number

The maximum progress value.

get-value-label
default:-
((value: number, max: number) => string)

A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

Event Emitted Value Type
update:max
[value: number]
Slot Type
#default
any

Customization

Your can override the component default CSS variables in your main.css file.

css
@theme {
  /* Default progress bar variables */
  --color-track-default-bg: var(--color-muted-200);
  --color-track-default-bg-active: var(--color-muted-500);
  --color-track-default-bg-invert: var(--color-white);
  --color-track-default-handle-bg: var(--color-white);
  --color-track-default-handle-border: var(--color-muted-300);
  --color-track-default-handle-ring: var(--color-track-default-bg-active);

  /* Dark progress bar variables */
  --color-track-dark-bg: var(--color-muted-200);
  --color-track-dark-bg-active: var(--color-muted-900);
  --color-track-dark-bg-invert: var(--color-white);
  --color-track-dark-handle-bg: var(--color-white);
  --color-track-dark-handle-border: var(--color-muted-300);
  --color-track-dark-handle-ring: var(--color-track-dark-bg-active);
}

Examples

Value

Use the value prop to set the value of the progress circle.

vue
<template>
  <BaseProgressCircle
    v-model:value="value"
    title="Static progress bar with max value"
    :size="55"
  />
</template>

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

Variant

Use the variant prop to change the color of the progress circle. Set it to none to apply your own colors.

vue
<template>
  <BaseProgressCircle
    v-model:value="value"
    title="Colored circle progress bar"
    :size="55"
    class="text-emerald-500 *:first:text-muted-200 *:dark:first:text-muted-900"
  />
</template>

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

Size

use the size prop to set the size of the progress circle.

vue
<template>
  <BaseProgressCircle
    v-model:value="value"
    title="Colored circle progress bar"
    :size="75"
  />
</template>

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

Thickness

use the thickness prop to set the stroke width of the progress circle.

vue
<template>
  <BaseProgressCircle
    v-model:value="value"
    title="Colored circle progress bar"
    :thickness="2"
  />
</template>

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

Indeterminate

Having an undefined value on the :model-value or the v-model will show the progress circle component in an indeterminate state.

vue
<template>
  <BaseProgressCircle
    title="Colored circle progress bar"
  />
</template>

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

Progress

Prose