SlateUI
DocsComponentsGitHub
Install SlateUI Plugin
SlateUI
DocsComponentsGitHub
Install SlateUI Plugin

Components

  • installation
  • button
  • inputs
  • notification
  • progressbar
  • loading
  • proximity
  • router
Component

ProgressBarService

Sets a progress bar to any 0–1 value with a smooth tween or an optional spring bounce. Supports both the minimal single-bar layout and a full fill-container layout.

Overview

ProgressBarService.Set() is a single-function API. It locates the correct fill element automatically by checking for a Bar child (minimal mode) or a Fill_Container.Fill hierarchy (regular mode), then tweens its X-axis scale to the target percentage.

Interactive Preview
progress60%

quad easing

Properties

Percent60
Spring effect
ProgressBarService.Set(script.Parent.Bar, 0.6)

Minimal setup — tween to 75%

luau
1
2
3
4
local ProgressBarService = require(game.ReplicatedStorage.SlateUI.ProgressBarService)
 
-- barObject must contain a child named "Bar"
ProgressBarService.Set(script.Parent.MyProgressBar, 0.75)

Instant set — no tween (e.g. on init)

luau
1
ProgressBarService.Set(script.Parent.MyProgressBar, 0, true) -- instant reset to 0%

Spring bounce effect

luau
1
2
-- Great for XP bars, achievement fills, etc.
ProgressBarService.Set(script.Parent.XPBar, 0.9, false, { spring = true })

Advanced — Animated Loading Loop

Drive the bar from a loop, updating it in real time. The tween time is 0.3s by default so frequent updates look smooth without jumping.

Real-time asset preload progress

luau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
local ProgressBarService = require(game.ReplicatedStorage.SlateUI.ProgressBarService)
local ContentProvider = game:GetService("ContentProvider")
 
local assets = { ... } -- your asset list
local bar = script.Parent.LoadingBar
local loaded = 0
 
ProgressBarService.Set(bar, 0, true) -- reset
 
for _, asset in ipairs(assets) do
ContentProvider:PreloadAsync({ asset }, function()
loaded += 1
ProgressBarService.Set(bar, loaded / #assets)
end)
end
 
ProgressBarService.Set(bar, 1) -- ensure 100% on finish

GUI Hierarchy

Minimal layout: a Frame with a direct child named Bar whose Size.X.Scale is driven by the service. Regular layout: a Frame with Fill_Container > Fill where Fill is sized. The service auto-detects which layout is present.

API — ProgressBarService.Set

PropTypeDefaultDescription
barObjectFrame—Root frame of the progress bar. Must have a Bar or Fill_Container.Fill child.
percentnumber—Target fill amount, clamped 0–1.
instantbooleanfalseIf true, sets the size immediately without tweening.
opts.springbooleanfalseUses Enum.EasingStyle.Back (overshoot) instead of Quad for a springy feel.