Menus

How to Make a Roblox Loading Screen GUI

A loading screen covers the viewport while assets stream in. This guide builds a full-screen Frame with a gradient background, a big title, a progress bar whose fill tweens from 0 to full, and a tip line. Once your game is ready, you destroy the GUI. There's also a loading-screen template to start from.

Open the Loading Screen template →

1. Full-screen background and title

Set IgnoreGuiInset = true on the ScreenGui so the frame covers the whole viewport including the top bar. A UIGradient on the background Frame gives it depth.

local gui = Instance.new("ScreenGui")
gui.IgnoreGuiInset = true
gui.Parent = player.PlayerGui

local bg = Instance.new("Frame")
bg.Size = UDim2.fromScale(1, 1)
bg.BackgroundColor3 = Color3.fromRGB(12, 13, 23)
bg.Parent = gui

local title = Instance.new("TextLabel")
title.Size = UDim2.fromScale(0.6, 0.12)
title.Position = UDim2.fromScale(0.2, 0.36)
title.BackgroundTransparency = 1
title.Text = "LOADING"
title.Font = Enum.Font.GothamBlack
title.TextSize = 44
title.Parent = bg

2. The progress bar

The bar is two Frames: a dark track and a colored fill. The fill starts at Scale 0 width and you tween it up as loading progresses.

local track = Instance.new("Frame")
track.Size = UDim2.fromScale(0.4, 0.03)
track.Position = UDim2.fromScale(0.3, 0.56)
track.BackgroundColor3 = Color3.fromRGB(29, 31, 41)
track.Parent = bg
Instance.new("UICorner", track).CornerRadius = UDim.new(1, 0)

local fill = Instance.new("Frame")
fill.Size = UDim2.fromScale(0, 1)
fill.BackgroundColor3 = Color3.fromRGB(0, 162, 255)
fill.Parent = track
Instance.new("UICorner", fill).CornerRadius = UDim.new(1, 0)

3. Animate it and clean up

Use TweenService to grow the fill. When loading is done, Destroy the GUI so it's gone for good.

local tween = game:GetService("TweenService"):Create(
	fill,
	TweenInfo.new(3, Enum.EasingStyle.Linear),
	{ Size = UDim2.fromScale(1, 1) }
)
tween:Play()
tween.Completed:Connect(function()
	gui:Destroy()
end)

Tip: For a real game, drive the fill from actual asset-loading progress rather than a fixed timer, so it never finishes before the game is ready.

FAQ

How do I cover the top bar too?

Set IgnoreGuiInset = true on the ScreenGui. The first Frame with Size UDim2.fromScale(1,1) then covers the entire viewport.

How do I animate the progress bar?

Tween the fill Frame's Size from UDim2.fromScale(0,1) to UDim2.fromScale(1,1) with TweenService, then Destroy the GUI in tween.Completed.