---
title: "Progress"
description: "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar."
canonical_url: "https://vinicunca.dev/akar/components/progress"
---
# Progress

> Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

```vue [index.vue]
<script setup lang="ts">
import { ProgressIndicator, ProgressRoot } from 'akar'
import { onMounted, ref } from 'vue'
import './styles.css'

const progressValue = ref(10)

onMounted(() => {
  const timer = setTimeout(() => (progressValue.value = 66), 500)
  return () => clearTimeout(timer)
})
</script>

<template>
  <div class="akar-demo akar-demo-Progress">
    <ProgressRoot
        v-model="progressValue"
        class="ProgressRoot"
        style="transform: translateZ(0)"
      >
        <ProgressIndicator
          class="ProgressIndicator"
          :style="`transform: translateX(-${100 - progressValue}%)`"
        />
      </ProgressRoot>
  </div>
</template>
```

```css [styles.css]
@import '../_colors/black-alpha.css';

@scope (.akar-demo-Progress) {
.ProgressRoot {
  position: relative;
  overflow: hidden;
  background: var(--black-a9);
  border-radius: 99999px;
  width: 300px;
  height: 25px;

  /* Fix overflow clipping in Safari */
  /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
  transform: translateZ(0);
}

.ProgressIndicator {
  background-color: white;
  width: 100%;
  height: 100%;
  transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
}
}
```

## Features

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

## Installation

Install the component from your command line.

```bash [pnpm]
pnpm add akar
```

```bash [yarn]
yarn add akar
```

```bash [npm]
npm install akar
```

```bash [bun]
bun add akar
```

### Anatomy

Import all parts and piece them together.

```vue
<script setup>
import { ProgressIndicator, ProgressRoot } from 'akar';
</script>

<template>
  <ProgressRoot>
    <ProgressIndicator />
  </ProgressRoot>
</template>
```

## Accessibility

Adheres to the [`progressbar` role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/meter).

## API Reference

### Root

Contains all of the progress parts.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| 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.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/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.<br><br> 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` | The progress value. Can be bind as `v-model`. |

**Events**

| Event | Payload | Description |
| --- | --- | --- |
| `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 | Payload | Description |
| --- | --- | --- |
| `modelValue` | `number \| null` | Current input values |

[ProgressRoot.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Progress/ProgressRoot.vue)

| Data 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 | Description |
| --- | --- | --- | --- |
| `as` | `"div"` | `AsTag \| 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.<br><br>Read our [Composition](https://vinicunca.dev/akar/guides/composition) guide for more details. |

[ProgressIndicator.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Progress/ProgressIndicator.vue)

| Data attribute | Value |
| --- | --- |
| `[data-state]` | "complete" \\| "indeterminate" \\| "loading" |
| `[data-value]` | The current value |
| `[data-max]` | The max value |

---

- [ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/meter)
- [GitHub](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/Progress)
- [npm](https://www.npmjs.com/package/akar)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.