ProgressBar

Accessible progress indicator. Renders role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax. The inner fill width is set via inline style.

Features

Accessible with role=“progressbar” and ARIA attributes.

Automatic value clamping to min/max range.

Fill width set via inline style for smooth transitions.

Example

Storage used68%

6.8 GB of 10 GB used

Anatomy


import { ProgressBar } from '@wire-ui/react'
 
<div>
<div>
<span>Storage used</span>
<span>68%</span>
</div>
<ProgressBar percentage={68} />
<p>6.8 GB of 10 GB used</p>
</div>

Styling

ProgressBar renders a track with an inner fill element marked by data-part="fill". Style the fill using child selectors.


<ProgressBar percentage={65} className="
  h-2 rounded-full bg-gray-200
  [&_[data-part=fill]]:h-full
  [&_[data-part=fill]]:rounded-full
  [&_[data-part=fill]]:bg-black
  [&_[data-part=fill]]:transition-[width]
" />

Using data attributes

The inner fill element has data-part="fill". The root element has role="progressbar", aria-valuenow, aria-valuemin, and aria-valuemax.


[data-part="fill"] {
  height: 100%;
  border-radius: inherit;
  background: #000;
  transition: width 300ms;
}

Props

Prop	Type	Default	Description
`value`	`number`	required	Current progress value (clamped to `[min, max]`)
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`...rest`	`HTMLAttributes<HTMLDivElement>`	—	Spread onto root element

Accessibility

role="progressbar" on the root element
aria-valuenow, aria-valuemin, aria-valuemax set automatically from props
Value is clamped — passing a value outside [min, max] is safe