Progress

Linear progress indicator for determinate, indeterminate, buffer, and query loading states.

Introduction

Progress is a linear indicator for ongoing work. It supports indeterminate animation, known percentages, buffered downloads, and a query-style sweep while waiting for a value.

When to use: Show upload/download progress, long-running form submissions, or page-level loading along an edge or within a section.

Compared to similar components:

Spinner — Circular indicator for compact spaces (buttons, cards, inline loaders). Prefer Progress for full-width or horizontal tracks.
Skeleton — Placeholder shapes that preserve layout. Use Skeleton when content structure is known; use Progress when communicating how far work has progressed.
Snackbar — Transient toast for completed or failed outcomes. Progress reports work still in flight.

Always pass aria-label or aria-labelledby so assistive technology has an accessible name.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Progress } from "@bridge-ui/vue/Components/Progress";

import { Progress } from "@bridge-ui/react/Components/Progress";

Basic usage

By default, Progress renders an indeterminate bar—useful when duration is unknown.

<script setup lang="ts">
import { Progress } from "@bridge-ui/vue/Components/Progress";
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-4">
    <Progress aria-label="Loading…" />
  </div>
</template>

import { Progress } from "@bridge-ui/react/Components/Progress";

export default function ProgressBasic() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Progress aria-label="Loading…" />
    </div>
  );
}

Determinate

Set variant="determinate" and pass value from 0 to 100 when progress is known.

<script setup lang="ts">
import { Progress } from "@bridge-ui/vue/Components/Progress";
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-4">
    <Progress :value="40" variant="determinate" aria-label="Export data" />
  </div>
</template>

import { Progress } from "@bridge-ui/react/Components/Progress";

export default function ProgressDeterminate() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Progress value={40} variant="determinate" aria-label="Export data" />
    </div>
  );
}

Buffer

Use variant="buffer" with value and valueBuffer when some content is ready and more is still loading (for example media buffering). Keep valueBuffer ≥ value.

<script setup lang="ts">
import { Progress } from "@bridge-ui/vue/Components/Progress";
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-4">
    <Progress
      :value="30"
      variant="buffer"
      :value-buffer="60"
      aria-label="Loading…"
    />
  </div>
</template>

import { Progress } from "@bridge-ui/react/Components/Progress";

export default function ProgressBuffer() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Progress
        value={30}
        valueBuffer={60}
        variant="buffer"
        aria-label="Loading…"
      />
    </div>
  );
}

Query

variant="query" shows a sweeping animation while waiting for a determinate value to become available.

<script setup lang="ts">
import { Progress } from "@bridge-ui/vue/Components/Progress";
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-4">
    <Progress variant="query" aria-label="Loading…" />
  </div>
</template>

import { Progress } from "@bridge-ui/react/Components/Progress";

export default function ProgressQuery() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Progress variant="query" aria-label="Loading…" />
    </div>
  );
}

Colors

Use the color prop to convey semantic meaning. Available colors: primary, secondary, success, info, warning, error, and dark.

<script setup lang="ts">
import { Progress } from "@bridge-ui/vue/Components/Progress";
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-4">
    <Progress color="primary" aria-label="primary" />
    <Progress color="secondary" aria-label="secondary" />
    <Progress color="success" aria-label="success" />
    <Progress color="info" aria-label="info" />
    <Progress color="warning" aria-label="warning" />
    <Progress color="error" aria-label="error" />
    <Progress color="dark" aria-label="dark" />
  </div>
</template>

import { Progress } from "@bridge-ui/react/Components/Progress";

export default function ProgressColors() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Progress color="primary" aria-label="primary" />
      <Progress color="secondary" aria-label="secondary" />
      <Progress color="success" aria-label="success" />
      <Progress color="info" aria-label="info" />
      <Progress color="warning" aria-label="warning" />
      <Progress color="error" aria-label="error" />
      <Progress color="dark" aria-label="dark" />
    </div>
  );
}

Sizes

Control bar height with size and track/bar radius with rounded.

<script setup lang="ts">
import { Progress } from "@bridge-ui/vue/Components/Progress";
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-4">
    <Progress size="2xs" aria-label="2xs" />
    <Progress size="xs" aria-label="xs" />
    <Progress size="sm" aria-label="sm" />
    <Progress size="md" aria-label="md" />
    <Progress size="lg" aria-label="lg" />
    <Progress size="xl" aria-label="xl" />
    <Progress size="2xl" aria-label="2xl" />
  </div>
</template>

import { Progress } from "@bridge-ui/react/Components/Progress";

export default function ProgressSizes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Progress size="2xs" aria-label="2xs" />
      <Progress size="xs" aria-label="xs" />
      <Progress size="sm" aria-label="sm" />
      <Progress size="md" aria-label="md" />
      <Progress size="lg" aria-label="lg" />
      <Progress size="xl" aria-label="xl" />
      <Progress size="2xl" aria-label="2xl" />
    </div>
  );
}

Customization

Fine-tune appearance with className (React) or class (Vue), and the classes prop to target root, track, bar, and buffer.

<script setup lang="ts">
import { Progress } from "@bridge-ui/vue/Components/Progress";
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-4">
    <Progress
      aria-label="Custom progress"
      :classes="{
        bar: 'bg-primary-600 dark:bg-primary-400',
        track: 'bg-primary-100 dark:bg-primary-900',
      }"
    />
  </div>
</template>

import { Progress } from "@bridge-ui/react/Components/Progress";

export default function ProgressCustomization() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Progress
        aria-label="Custom progress"
        classes={{
          bar: "bg-primary-600 dark:bg-primary-400",
          track: "bg-primary-100 dark:bg-primary-900",
        }}
      />
    </div>
  );
}

Accessibility

Provide an accessible name with aria-label or aria-labelledby.
For determinate and buffer modes, Progress exposes the current value to assistive technology via progressbar semantics—keep value in sync with real progress.
Do not rely on color alone to communicate success or failure; pair with text or another status signal when the outcome matters.

Anatomy

Progress renders a root container with a track, an optional buffer bar, and the primary bar:

<div class="progress-root" role="progressbar">
  <div class="progress-track"></div>
  <!-- buffer variant only -->
  <div class="progress-buffer"></div>
  <div class="progress-bar"></div>
</div>

Spinner, Skeleton, Snackbar

API

Prop	Type	Default	Description
classes	ProgressClasses	—	Classes for root, track, bar, and buffer.
color	ProgressColor	"primary"	Semantic color of the bar and track.
customProps	ProgressCustomProps	—	Extra props for internal parts.
rounded	ProgressRounded	"full"	Border radius of the bar.
size	ProgressSize	"md"	Height of the progress bar.
value	number	—	Progress 0–100 (determinate / buffer).
valueBuffer	number	—	Buffer 0–100 (buffer variant).
variant	ProgressVariant	"indeterminate"	Visual mode of the indicator.