NUI / Components / Common

ProgressBar

ImplementedCommon / Feedback

ProgressBar displays a numeric progress value, usually between 0 and 1.

Supported as a simple progress display.

Overview

ProgressBar displays a numeric progress value, usually between 0 and 1.

When to use

Health.
Loading.
Crafting.
Cooldown.
Stamina.
Download.
Or completion progress.

Children

Does not support children.

Basic syntax

nui

ProgressBar HealthBar {
    value: 0.75
}

Supported properties

Property	Type	Required	Default	Description
`value`	number	Yes	0	Progress value.
`fillColor`	color	No	Default	Filled portion color.
`backgroundColor`	color	No	Default	Track color.
`borderColor`	color	No	Transparent	Border color.
`borderThickness`	number	No	0	Border thickness.
`radius`	number	No	0	Corner radius.
`direction`	enum	No	Default	Fill direction.
`width`	number	No	Auto	Desired width.
`height`	number	No	Auto	Desired height.
`opacity`	number	No	1	Render opacity.
`layer`	integer	No	Context default	Layer order inside layered parents.
`visible`	bool	No	true	Visibility flag.

Contextual properties

Contextual property rules

ProgressBar may receive stack, canvas, grid, wrap, or ExpandableArea slot properties only when it is authored as a direct child of the matching parent. See section 7.

Full syntax example

nui

ProgressBar HealthBar {
    value: 0.75
    fillColor: "#3DDC84"
    backgroundColor: "#202733"
    borderColor: "#4B5563"
    borderThickness: 1
    radius: 4
    direction: leftToRight
    width: 240
    height: 12
    opacity: 1
    layer: 1
    visible: true
}

Limitations

Advanced progress styling and loading-bar variants are planned separately.