Progress

The textured interface bar, shaded coloured bars, and the Grand Exchange's flat bars.

Installation

npx shadcn@latest add https://osrsui.com/r/progress.json

Usage

<Progress value={64}>64%</Progress>
<Progress value={30} color="orange" />

Colours, shading and segments

color (orange, green, red, yellow, lime) gives a shaded bar: a sunken well, and a fill lit along its top. That’s the look of minigame, collection and Combat Achievements bars. Add flat for the Grand Exchange’s plain fill and for thin tier bars of a few pixels. segments splits the bar into cells.

<Progress value={80} color="green" segments={5} />
<Progress value={45} color="orange" flat />