Custom Loading Screens

5 min

Roblox displays a default loading screen when players join, but you can personalize your game further with a custom loading screen that contains static or animated content.

This article covers loading screens which appear when players initially join the game. To customize loading screens which appear when players teleport, see articles/Teleporting Between Places.

Setup/Design

Custom loading screens utilize ReplicatedFirst, a service that replicates instances to clients before anything else is replicated.

Create a LocalScript within ReplicatedFirst.

Paste in the following code and customize the ScreenGui starting on line 10.

			
				LocalScript - Custom Game Loading Screen
			
				Expected Output
			
				Expand
				
			local Players = game:GetService("Players")
local ReplicatedFirst = game:GetService("ReplicatedFirst")

local player = Players.LocalPlayer 
local playerGui = player:WaitForChild("PlayerGui")

local screenGui = Instance.new("ScreenGui")
screenGui.IgnoreGuiInset = true
screenGui.Parent = playerGui
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.BackgroundColor3 = Color3.fromRGB(0, 20, 40)
textLabel.Font = Enum.Font.GothamSemibold
textLabel.TextColor3 = Color3.new(0.8, 0.8, 0.8)
textLabel.Text = "Loading"
textLabel.TextSize = 28
textLabel.Parent = screenGui

-- Remove the default loading screen
ReplicatedFirst:RemoveDefaultLoadingScreen()

wait(5)  -- Force screen to appear for a minimum number of seconds
if not game:IsLoaded() then
	game.Loaded:Wait()
end
screenGui:Destroy()
		
				Copy Code
			
				Light Theme

Screen Pre-Creation »

If you don’t want to design the loading screen through scripting, you can reference a pre-created ScreenGui named LoadingScreen using the script below. The screen should be stored inside ReplicatedFirst.

			
				LocalScript - Custom Game Loading Screen
			
				Expected Output
			
				Expand
				
			local Players = game:GetService("Players")
local ReplicatedFirst = game:GetService("ReplicatedFirst")

local player = Players.LocalPlayer 
local playerGui = player:WaitForChild("PlayerGui")

local screenGui = ReplicatedFirst:FindFirstChild("LoadingScreen")
screenGui.IgnoreGuiInset = true
screenGui.Parent = playerGui

-- Remove the default loading screen
ReplicatedFirst:RemoveDefaultLoadingScreen()

wait(5)  -- Force screen to appear for a minimum number of seconds
if not game:IsLoaded() then
	game.Loaded:Wait()
end
screenGui:Destroy()
		
				Copy Code
			
				Light Theme

Adding Animations

Animations can enhance the loading screen and indicate progress. The following example adds an ImageLabel to the screen and rotates it continually using TweenService.

			
				Custom Game Loading Screen
			
				Expected Output
			
				Expand
				
			local Players = game:GetService("Players")
local ReplicatedFirst = game:GetService("ReplicatedFirst")
local TweenService = game:GetService("TweenService")

local player = Players.LocalPlayer 
local playerGui = player:WaitForChild("PlayerGui")

local screenGui = Instance.new("ScreenGui")
screenGui.IgnoreGuiInset = true
screenGui.Parent = playerGui
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 1, 0)
textLabel.BackgroundColor3 = Color3.fromRGB(0, 20, 40)
textLabel.Font = Enum.Font.GothamSemibold
textLabel.TextColor3 = Color3.new(0.8, 0.8, 0.8)
textLabel.Text = "Loading"
textLabel.TextSize = 28
textLabel.Parent = screenGui
local loadingRing = Instance.new("ImageLabel")
loadingRing.Size = UDim2.new(0, 256, 0, 256)
loadingRing.BackgroundTransparency = 1
loadingRing.Image = "rbxassetid://4965945816"
loadingRing.AnchorPoint = Vector2.new(0.5, 0.5)
loadingRing.Position = UDim2.new(0.5, 0, 0.5, 0)
loadingRing.Parent = screenGui

-- Remove the default loading screen
ReplicatedFirst:RemoveDefaultLoadingScreen()

local tweenInfo = TweenInfo.new(4, Enum.EasingStyle.Linear, Enum.EasingDirection.In, -1)
local tween = TweenService:Create(loadingRing, tweenInfo, {Rotation = 360})
tween:Play()

wait(5)  -- Force screen to appear for a minimum number of seconds
if not game:IsLoaded() then
	game.Loaded:Wait()
end
screenGui:Destroy()
		
				Copy Code
			
				Light Theme

Tags:

Custom Loading Screens

Custom Loading Screens

Setup/Design

Screen Pre-Creation »

Adding Animations

Related Articles

GUI Animations

Teleporting Between Places