Animated Progress Bar

A progress bar that springs to its new value instead of tweening. The fill runs on a { stiffness: 100, damping: 10, mass: 0.75 } spring, so a value that changes while it is still moving redirects rather than restarting. shimmer adds a single gradient sweep that repeats every 1.5s, for the "something is happening here" case where the value itself is not moving.

The bar you see is an overlay. A real UProgress sits underneath with its indicator forced to opacity-0, and the component measures the track and the hidden indicator at mount to copy their geometry and colour — which is why color and size are forwarded to UProgress and then read back off it instead of being applied twice.

Set orientation="vertical" and there is no animation at all: the overlay is rendered only for horizontal bars, and a vertical bar gets the theme's own static indicator.

Usage

Drive it with value. Add label for visible text, status for a percentage, and shimmer for an indeterminate-looking sweep on top of a known value.

<template>
  <div class="flex w-full max-w-md flex-col gap-5">
    <MAnimatedProgressBar
      :value="progress"
      :max="100"
      label="Uploading assets"
      status
      shimmer
      color="primary"
    />

    <div class="flex items-center gap-3">
      <UButton
        size="sm"
        label="Advance"
        icon="i-lucide-play"
        @click="advance"
      />
      <UButton
        size="sm"
        label="Reset"
        variant="outline"
        color="neutral"
        @click="progress = 0"
      />
      <span class="text-xs tabular-nums text-muted">{{ progress }}%</span>
    </div>
  </div>
</template>

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

function advance() {
  progress.value = progress.value >= 100 ? 0 : Math.min(100, progress.value + 24)
}
</script>

Customize

Props

Slots

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.animatedProgressBar in app.config.ts.

Accessibility

The real UProgress underneath supplies everything: Reka UI's ProgressRoot carries role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext. The animated overlay is a plain <div> with no ARIA, so the number is exposed once and the bar's motion is invisible to assistive technology.

The gap is the name. label is rendered in a sibling <div> and nothing links it to the progressbar — there is no aria-labelledby, and because the component does not set inheritAttrs: false any aria-label you add lands on the outer wrapper rather than on the progressbar itself. If a name matters, put an aria-label on a wrapping element with role="region", or announce the value from your own live region.

prefers-reduced-motion is read through useReducedMotion(). Both the fill spring and the shimmer sweep collapse to { duration: 0 }, so the bar jumps to its value and the shimmer does not move. The value is still exposed correctly, because it is read from the progressbar's ARIA and not from the animation.

Performance

• The real indicator is neutralised through the ui merge rather than by an extra wrapper, so there is exactly one visible bar and no duplicated DOM fighting for the same track.
• measure() runs once on mount, from a ResizeObserver on the root, and again on the next tick whenever status, label, shimmer, size, color or max changes — the cases where the track can move. The observer disconnects on unmount.
• The overlay's colour and radius are read from getComputedStyle on the hidden indicator and the track, so the bar always matches the theme rather than restating its colours as props.
• value is clamped to 0–100 and then capped at max, so an out-of-range value cannot overflow the track.
• The shimmer is a 200%-wide gradient child sweeping x from -100% to 100% on a 1.5s linear repeat — one infinite transform animation, no setInterval.
• Unlike the rest of this set, the fill animates width, not a transform. That is a layout-animating property; the cost is contained to one absolutely positioned overlay inside a fixed-size track.
• No timers, no requestAnimationFrame, and nothing re-renders per frame.