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.
• Stepper — Numbered stages for checkout, onboarding, and wizards. Prefer Progress for a labeled bar; use Stepper for discrete named steps.

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.

Determinate

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

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.

Query

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

Colors

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

Sizes

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

Customization

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

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>

Related components

Spinner, Skeleton, Snackbar, Stepper

API