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 articles/Teleporting Between Places|teleport between places, see articles/Creating a Custom Teleport GUI|Custom Teleport Screens.

Setup/Design

Custom loading screens begin as a LocalScript within ReplicatedFirst, a service that replicates instances to the client before anything else is replicated.

Within the script, delete all existing lines and paste the following code:

				
					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")
		
				Copy Code
			
				Light Theme

Once the initial code is in place, you can design the loading screen using standard GUI elements within a ScreenGui. This ScreenGui should be parented to the player’s PlayerGui, regardless of whether it’s manually created/stored in ReplicatedFirst or created via the LocalScript itself.

				
					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")

-- Create a basic loading screen
local screenGui = Instance.new("ScreenGui")
screenGui.IgnoreGuiInset = true
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
-- Parent entire screen GUI to player GUI
screenGui.Parent = playerGui
		
				Copy Code
			
				Light Theme

Removing the Default

Once the custom screen is configured, the default loading screen should be removed. Note that a short delay occurs when waiting for PlayerGui, so ReplicatedFirst/RemoveDefaultLoadingScreen|RemoveDefaultLoadingScreen() should be called after the custom loading screen is created and parented.

				
					Custom Game Loading Screen
				
					Expected Output
				
					Expand
					
			-- Create a basic loading screen
local screenGui = Instance.new("ScreenGui")
screenGui.IgnoreGuiInset = true
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
-- Parent entire screen GUI to player GUI
screenGui.Parent = playerGui

-- Remove the default loading screen
ReplicatedFirst:RemoveDefaultLoadingScreen()
		
				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")

-- Create a basic loading screen
local screenGui = Instance.new("ScreenGui")
screenGui.IgnoreGuiInset = true
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
-- Parent entire screen GUI to player GUI
screenGui.Parent = playerGui

-- 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()
		
				Copy Code
			
				Light Theme

Removal on Load

To remove the custom loading screen once the game is loaded, the recommended approach is:

If DataModel/IsLoaded|game:IsLoaded() does not return true, wait for the DataModel/Loaded|Loaded event.
Once the DataModel/Loaded|Loaded event triggers, remove the custom screen by destroying the ScreenGui.

				
					Custom Game Loading Screen
				
					Expected Output
				
					Expand
					
			local tweenInfo = TweenInfo.new(4, Enum.EasingStyle.Linear, Enum.EasingDirection.In, -1)
local tween = TweenService:Create(loadingRing, tweenInfo, {Rotation=360})
tween:Play()

--wait(3)  -- Optionally 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

Removing the Default

Adding Animations

Removal on Load

Related Articles

Creating Custom Teleport Screens

GUI Animations