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.
heightnumber4The 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).

Accessibility

The Progress component is built with accessibility in mind:

  • Uses semantic structure for screen readers
  • Supports gesture-based interaction when interactive
  • Proper touch targets for interactive elements
  • Smooth animations with reduced motion support
  • Clear visual feedback for progress states

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