Menu
Documentation
v4.0.0-beta.4

Progress

<BaseProgress /> · A progression indicator element.

View SourceOpen Issue
vue
<template>
  <BaseProgress
    v-model="progress"
    title="Progress bar"
  />
</template>

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

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>
  <BaseProgress />
</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
variant
default:"default"
"default" | "primary" | "dark" | "none"

The variant of the progress bar.

rounded
default:"full"
"none" | "md" | "sm" | "lg" | "full"

The radius of the progress bar.

size
default:"sm"
"md" | "xs" | "sm" | "lg" | "xl"

The size of the progress bar.

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 bar.

vue
<template>
  <BaseProgress
    v-model="progress"
    title="Dynamic progress bar"
  />
</template>

<script setup lang="ts">
const progress = ref(76)
</script>

Indeterminate

Omit the value prop to set the progress bar in an indeterminate state.

vue
<template>
  <BaseProgress title="Indeterminate progress bar" />
</template>

Size

Use the size prop to change the size of the progress bar.

vue
<template>
  <BaseProgress
    v-model="progress"
    title="Medium progress bar"
    size="md"
  />
</template>

<script setup lang="ts">
const progress = ref(76)
</script>

Variants

Use the variant prop to change the color of the progress bar. Set it to none to remove the default color and apply your own.

vue
<template>
  <BaseProgress
    v-model="progress"
    title="Custom progress bar"
    size="sm"
    variant="none"
    class="bg-muted-200 dark:bg-muted-900 *:first:bg-yellow-400"
  />
</template>

<script setup lang="ts">
const progress = ref(76)
</script>

Primitive Field

Progress Circle