BNA

BNA UI
...

Progress

PreviousNext

A progress bar component to show completion status with optional interactivity.

Installation

pnpm dlx bna-ui add progress

Usage

import { Progress } from '@/components/ui/progress';
<Progress value={65} />

Examples

Default

Interactive

Custom Heights

With Labels

Animated

Media Player Style

Step Progress

API Reference

Progress

The main progress bar component.

PropTypeDefaultDescription
valuenumber-The progress value between 0-100.
styleViewStyle-Additional styles to apply to the progress container.
heightnumberHEIGHT (48)The height of the progress bar in pixels.
onValueChange(value: number) => void-Callback fired when the progress value changes (interactive).
onSeekStart() => void-Callback fired when seeking starts (interactive).
onSeekEnd() => void-Callback fired when seeking ends (interactive).
interactivebooleanfalseWhether the progress bar can be interacted with (tap/drag).
stepnumber10Amount to adjust value by per accessibility increment/decrement action, when interactive.

Accessibility

The Progress component is built with accessibility in mind:

  • Exposes accessibilityRole="progressbar" (or "adjustable" when interactive) with accessibilityValue={{ min: 0, max: 100, now: value }}
  • When interactive, accessibilityActions (increment/decrement) let screen-reader users adjust the value without the drag gesture

Interactive Features

When interactive is set to true, the Progress component supports:

  • Tap to seek: Tap anywhere on the progress bar to jump to that position
  • Drag to scrub: Drag the progress indicator to scrub through values
  • Smooth animations: Animated transitions between values
  • Callbacks: Get notified when seeking starts, changes, or ends

This makes it perfect for media players, volume controls, or any scenario where users need to adjust a value by interacting with the progress bar.

PopoverRadio