Skip to content
PixeloreUI
Feedback

Progress

A determinate progress bar. The default fill uses a stepped easing and a faint repeating gradient that hints at scanlines — disabled when the user prefers reduced motion.

Default

Custom maximum

Without the stepped texture

The stepped texture suits XP bars and loading screens. For minimal usage (e.g. real-time meters) pass stepped={false}.

Accessibility notes

  • Exposes role=“progressbar” with aria-valuenow, aria-valuemin, and aria-valuemax via Radix.
  • Pair with a visible label above the bar — screen readers announce the value but sighted users need to know what's being measured.
  • The motion-driven width animation reduces to an instant set under prefers-reduced-motion.
Edit this page on GitHub