Progress

A bar showing task progress.

<script setup lang="ts">
import { Progress } from '@shardsui/vue/progress'
import { onMounted, onUnmounted, shallowRef } from 'vue'

const value = shallowRef(15)

let interval: ReturnType<typeof setInterval>

onMounted(() => {
  interval = setInterval(() => {
    value.value = Math.min(100, Math.round(value.value + Math.random() * 20))
  }, 1000)
})

onUnmounted(() => clearInterval(interval))
</script>

<template>
  <Progress.Root class="grid w-60 max-w-full grid-cols-2 gap-y-2" :value="value">
    <Progress.Label class="text-sm font-normal text-gray-900">Uploading</Progress.Label>
    <Progress.Value class="text-right text-sm text-gray-900 tabular-nums" />
    <Progress.Track
      class="col-span-full h-1 overflow-hidden rounded-sm bg-gray-50 inset-ring inset-ring-gray-200"
    >
      <Progress.Indicator class="block bg-gray-500 transition-[width] duration-500" />
    </Progress.Track>
  </Progress.Root>
</template>

Anatomy

<script setup>
import { Progress } from '@shardsui/vue/progress'
</script>

<template>
  <Progress.Root>
    <Progress.Label />
    <Progress.Track>
      <Progress.Indicator />
    </Progress.Track>
    <Progress.Value />
  </Progress.Root>
</template>

API reference

Root

Groups all parts of the progress bar and reports the task's status to screen readers. Renders a <div> element with role="progressbar".

role="progressbar" requires an accessible name: render a Progress.Label inside Root, or pass aria-label to Root.

Track

Contains the progress bar indicator and represents the whole task. Renders a <div> element.

Indicator

Visualizes how much of the task is done. Its width is set inline, from the value's percentage position between min and max; in the indeterminate status no width is set. Renders a <div> element.

Value

A text element displaying the current value. Hidden from screen readers, which read the value from Root. Renders a <span> element.

Label

An accessible label for the progress bar. Renders a <span> element.

Additional types

ProgressStatus

The status carried by the object handed to the default slot of Root, Track, Indicator and Label.

type ProgressStatus = 'indeterminate' | 'progressing' | 'complete'