@lattice-ui/progress Part of the stable direction toward v1.0.
What It Is For
Use Progress and Spinner for task feedback when the app should communicate either measurable completion or ongoing work.
The package gives you normalized progress state and timing hooks while leaving the visuals completely up to you.
import { Progress } from "@lattice-ui/progress";
import React from "@rbxts/react";
export function ProgressExample() {
const [value, setValue] = React.useState(40);
return (
<frame BackgroundTransparency={1} Size={UDim2.fromOffset(420, 180)}>
<Progress.Root max={100} value={value}>
<frame
BackgroundColor3={Color3.fromRGB(34, 41, 54)}
BorderSizePixel={0}
Size={UDim2.fromOffset(320, 14)}
>
<uicorner CornerRadius={new UDim(0, 7)} />
<Progress.Indicator asChild>
<frame
BackgroundColor3={Color3.fromRGB(53, 104, 196)}
BorderSizePixel={0}
Size={UDim2.fromScale(1, 1)}
>
<uicorner CornerRadius={new UDim(0, 7)} />
</frame>
</Progress.Indicator>
</frame>
</Progress.Root>
<Progress.Spinner asChild speedDegPerSecond={240} spinning={true}>
<frame
BackgroundTransparency={1}
BorderSizePixel={0}
Position={UDim2.fromOffset(0, 34)}
Size={UDim2.fromOffset(24, 24)}
>
<uistroke
Color={Color3.fromRGB(53, 104, 196)}
Thickness={2}
Transparency={0.35}
/>
<frame
AnchorPoint={new Vector2(0.5, 0.5)}
BackgroundColor3={Color3.fromRGB(53, 104, 196)}
BorderSizePixel={0}
Position={UDim2.fromScale(0.5, 0.1)}
Size={UDim2.fromOffset(4, 4)}
>
<uicorner CornerRadius={new UDim(1, 0)} />
</frame>
</frame>
</Progress.Spinner>
<textbutton
AutoButtonColor={false}
BackgroundColor3={Color3.fromRGB(60, 76, 104)}
BorderSizePixel={0}
Position={UDim2.fromOffset(0, 78)}
Size={UDim2.fromOffset(140, 34)}
Text="Increase by 10"
TextColor3={Color3.fromRGB(236, 240, 248)}
TextSize={14}
Event={{
Activated: () => setValue((current) => math.min(100, current + 10)),
}}
>
<uicorner CornerRadius={new UDim(0, 8)} />
</textbutton>
</frame>
);
}Live demo is experimental and may contain bugs.
Install
Global CLI command: lattice add progress
Monorepo local script
Use your package manager wrapper when running the local lattice command.
pnpm lattice add progressPublic Exports
-
Progress -
Progress.Root -
Progress.Indicator -
Progress.Spinner -
clampProgressValue -
resolveProgressRatio
State Model
Progress.Roottracksvalue,max, a normalizedratio, andindeterminatestate.- The component supports controlled and uncontrolled numeric progress values.
Spinneris a separate primitive that owns only whether it is spinning and how fast it rotates.
Key API
Progress.Root
Use value, defaultValue, onValueChange, max, and indeterminate to define the semantic progress state.
Progress.Indicator
Render your own bar or fill element and read the shared ratio through the compound component wiring.
Progress.Spinner
Use spinning and speedDegPerSecond when you need an activity indicator rather than a measurable progress bar.
Composition Patterns
Linear task feedback
Use Progress.Root plus Progress.Indicator for uploads, saves, and loading bars that should reflect a bounded numeric state.
Compact pending indicators
Use Spinner for asynchronous work that has no trustworthy completion percentage.
Cautions / Limits
indeterminatemode is a semantic state, not a built-in animation style; you still own the visuals.- Out-of-range values are normalized by the package, so do not depend on raw overflow behavior in your UI.