Progress

An indicator showing the progress of a task.

<script setup lang="ts">
import { AProgressIndicator, AProgressRoot } from 'akar';
import { onBeforeUnmount, onMounted, ref } from 'vue';

const progressValue = ref(10);
const timer = ref();

onMounted(() => {
  timer.value = setInterval(() => {
    if (progressValue.value === 100) {
      progressValue.value = 10;
    } else {
      progressValue.value += 30;
    }
  }, 2000);
});

onBeforeUnmount(() => {
  clearTimeout(timer.value);
});
</script>

<template>
  <AProgressRoot
    v-model="progressValue"
    class="rounded-full bg-background-accented h-2 w-full relative overflow-hidden"
  >
    <AProgressIndicator
      class="rounded-full bg-primary size-full transition-transform-280 ease-out data-[state=indeterminate]:animate-carousel"
      :style="`transform: translateX(-${100 - progressValue}%)`"
    />
  </AProgressRoot>
</template>

Features

Provides context for assistive technology to read the progress of a task.

Anatomy

Import all parts and piece them together.

<script setup>
import { AProgressIndicator, AProgressRoot } from 'akar';
</script>

<template>
  <AProgressRoot>
    <AProgressIndicator />
  </AProgressRoot>
</template>

Accessibility

Adheres to the progressbar role requirements.

API Reference

Root

Contains all of the progress parts.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`getValueLabel`	isNumber(value) ? `${Math.round((value / max) * DEFAULT_MAX)}%` : undefined	`((value: number \| null, max: number) => string)` A function to get the accessible label text 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.
`getValueText`		`((value: number \| null, max: number) => string)` A function to get the accessible value text representing the current value in a human-readable format.
`max`	`DEFAULT_MAX`	`number` The maximum progress value.
`modelValue`		`number \| null`

Emits

Event	Type
`update:max`	`[value: number]` Event handler called when the max value changes
`update:modelValue`	`[value: string[]]` Event handler called when the progress value changes

Slots

Slot	Type
`modelValue`	`number \| null` The progress value. Can be bind as `v-model`.

Data Attributes

Attribute	Value
`[data-state]`	`'complete' \| 'indeterminate' \| 'loading'`
`[data-value]`	The current value
`[data-max]`	The max value

Indicator

Used to show the progress visually. It also makes progress accessible to assistive technologies.

Props

Prop	Default	Type
`as`	`'div'`	`APrimitiveAsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Data Attributes

Attribute	Value
`[data-state]`	`'complete' \| 'indeterminate' \| 'loading'`
`[data-value]`	The current value
`[data-max]`	The max value

Pagination

Displays data in paged format and provides navigation between pages.

Range Calendar

Presents a calendar view tailored for selecting date ranges.