Skip to content

Progress

Progress shows how far a task has got, as a bar or a ring. If you do not set a Value, it is indeterminate: it shows that something is happening but not how much is done.

Usage

Call Components.Progress with a scope and a table of properties:

local done = scope:Value(0.4)

C.Progress(scope, { Value = done }) -- bar
C.Progress(scope, { Variant = "Circular", Value = done, SizePx = 48 })
C.Progress(scope, { Variant = "Circular" }) -- (1)!
  1. With no Value, a circular progress is the LoadingIndicator, which changes shape. Set Indicator to "Arc" for a spinning arc.

Properties

Name Type Required Default Description
Theme ThemeRef ❌ The contextual theme Theme to use for this component instead of the one from Theme.Provide.
LayoutOrder UsedAs<number> ❌ 0 Position in a parent UIListLayout or UIGridLayout.
Size UsedAs<UDim2> ❌ - Size of the component.
Visible UsedAs<boolean> ❌ true Whether the component is shown.
ZIndex UsedAs<number> ❌ - Z index of the component.
Value UsedAs<number> ❌ - Progress from 0 to 1. If you leave it out, the progress is indeterminate. The bar eases to each new value.
Buffer UsedAs<number> ❌ - Linear buffering only. How far the buffered part reaches, from 0 to 1.
Variant ProgressVariant ❌ "Linear" "Linear" for a bar, "Circular" for a ring.
Mode ProgressMode ❌ "Determinate" when there is a Value, otherwise "Indeterminate" "Determinate", "Indeterminate" or "Buffering".
SizePx number ❌ 40 Circular only. Outer diameter, in pixels.
Style ProgressStyle ❌ "Standard" Circular only. "Standard" has round caps and a gap before the track. "Classic" has flat caps and a full track.
Thickness number ❌ 3 for "Classic", otherwise 4 Circular only. Width of the ring, in pixels.
Indicator "Morph" \| "Arc" ❌ "Morph" Circular indeterminate only. "Morph" or "Arc".
Background Color3 ❌ Colors.Surface Circular "Arc" indeterminate only. The colour of the surface behind the progress. The component paints this colour over the ring to cut out the arc.

See also