YuhuanStudioYunUIDocs
Feedback

Progress

A horizontal progress bar; pass a value from 0–100 and the indicator animates to it.

A horizontal progress bar built on Radix Progress. Pass a value between 0 and 100; the filled indicator animates to that percentage. Every Radix Progress attribute spreads through, and className lets you adjust the track height or color.

Import

import { Progress } from "@yuhuanowo/yunui";

Basic

Progress values

Empty & full

Edge values

Props

Progress wraps the Radix Progress root, so it accepts every Radix Progress attribute plus className. The one prop you will usually set:

PropTypeDefaultDescription
valuenumber0Percent complete, 0–100. The filled indicator animates to this width.
classNamestringExtra classes for the track (e.g. to change its height or background).

On this page