Progress

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

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

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

pnpm add akar

yarn add akar

npm install akar

bun add akar

Anatomy

Import all parts and piece them together.

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

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

Accessibility

Adheres to the progressbar role requirements.

API Reference

Root

Contains all of the progress parts.

Prop	Default	Type
`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. 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` The progress value. Can be bind as `v-model`.

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

Slot (default)	Payload
`modelValue`	`number \| null` Current input values

ProgressRoot.vue source

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.

Prop	Default	Type
`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. Read our Composition guide for more details.

ProgressIndicator.vue source

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

Popover

Displays rich content in a portal, triggered by a button.

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.