Customizing Loading Screens

Roblox displays a default loading screen when users is connecting to an experience, but you can personalize your experience with a custom loading screen that contains static or animated content.

Displaying Custom Loading Screens

To display a custom loading screen, you can either design a ScreenGui instance directly within a LocalScript, or you can reference a ScreenGui object in your workspace. Both options utilize ReplicatedFirst, as this service that replicates instances to clients before anything else is replicated. This ensures that your loading screen is the first thing users see when they enter your experience.

Designing within LocalScripts

To design and display a custom loading screen:

  1. In ReplicatedFirst, create a LocalScript.

  2. Use the following code sample to create and customize a ScreenGui object. You can modify the following code with your own values to create your design:


1local Players = game:GetService("Players")
2local ReplicatedFirst = game:GetService("ReplicatedFirst")
3
4local player = Players.LocalPlayer
5local playerGui = player:WaitForChild("PlayerGui")
6
7local screenGui = Instance.new("ScreenGui")
8screenGui.IgnoreGuiInset = true
9screenGui.Parent = playerGui
10-- Replace ScreenGui values with your own
11local textLabel = Instance.new("TextLabel")
12textLabel.Size = UDim2.new(1, 0, 1, 0)
13textLabel.BackgroundColor3 = Color3.fromRGB(0, 20, 40)
14textLabel.Font = Enum.Font.GothamSemibold
15textLabel.TextColor3 = Color3.new(0.8, 0.8, 0.8)
16textLabel.Text = "Loading"
17textLabel.TextSize = 28
18textLabel.Parent = screenGui
19
20-- Remove the default loading screen
21ReplicatedFirst:RemoveDefaultLoadingScreen()
22
23task.wait(5) -- Force screen to appear for a minimum number of seconds
24if not game:IsLoaded() then
25 game.Loaded:Wait()
26end
27screenGui:Destroy()
28

Referencing ScreenGuis

Instead of creating the ScreenGui through a LocalScript, you can also reference an existing ScreenGui directly in your workspace. Ensure that your experience includes a ScreenGui within ReplicatedFirst and that the ScreenGui includes UI elements like TextLabels and ImageLabels, then set it as the loading screen by referencing it within a LocalScript. This method allows you to easily view your loading screen as you're creating it.

To demonstrate this process, the following LocalScript references a ScreenGui named LoadingScreen within ReplicatedFirst, then removes the default loading screen so the only loading screen a user can see is your own custom loading screen:


1local Players = game:GetService("Players")
2local ReplicatedFirst = game:GetService("ReplicatedFirst")
3
4local player = Players.LocalPlayer
5local playerGui = player:WaitForChild("PlayerGui")
6
7local screenGui = ReplicatedFirst:FindFirstChild("LoadingScreen")
8screenGui.IgnoreGuiInset = true
9screenGui.Parent = playerGui
10
11-- Remove the default loading screen
12ReplicatedFirst:RemoveDefaultLoadingScreen()
13
14task.wait(5) -- Force screen to appear for a minimum number of seconds
15if not game:IsLoaded() then
16 game.Loaded:Wait()
17end
18screenGui:Destroy()
19

Adding Animations

In addition to static custom loading screens, you can add animations to enhance the loading screen and indicate loading progress. The easiest way to do this is to create a UI element, such as a TextLabel or ImageLabel, then to animate it using TweenService. For example, the following code sample creates a new ScreenGui with a child ImageLabel, removes the default loading screen, then TweenService rotates the ImageLabel continuously until the experience loads:


1local Players = game:GetService("Players")
2local ReplicatedFirst = game:GetService("ReplicatedFirst")
3local TweenService = game:GetService("TweenService")
4
5local player = Players.LocalPlayer
6local playerGui = player:WaitForChild("PlayerGui")
7
8local screenGui = Instance.new("ScreenGui")
9screenGui.IgnoreGuiInset = true
10screenGui.Parent = playerGui
11local textLabel = Instance.new("TextLabel")
12textLabel.Size = UDim2.new(1, 0, 1, 0)
13textLabel.BackgroundColor3 = Color3.fromRGB(0, 20, 40)
14textLabel.Font = Enum.Font.GothamSemibold
15textLabel.TextColor3 = Color3.new(0.8, 0.8, 0.8)
16textLabel.Text = "Loading"
17textLabel.TextSize = 28
18textLabel.Parent = screenGui
19local loadingRing = Instance.new("ImageLabel")
20loadingRing.Size = UDim2.new(0, 256, 0, 256)
21loadingRing.BackgroundTransparency = 1
22loadingRing.Image = "rbxassetid://4965945816"
23loadingRing.AnchorPoint = Vector2.new(0.5, 0.5)
24loadingRing.Position = UDim2.new(0.5, 0, 0.5, 0)
25loadingRing.Parent = screenGui
26
27-- Remove the default loading screen
28ReplicatedFirst:RemoveDefaultLoadingScreen()
29
30local tweenInfo = TweenInfo.new(4, Enum.EasingStyle.Linear, Enum.EasingDirection.In, -1)
31local tween = TweenService:Create(loadingRing, tweenInfo, {Rotation = 360})
32tween:Play()
33
34task.wait(5) -- Force screen to appear for a minimum number of seconds
35if not game:IsLoaded() then
36 game.Loaded:Wait()
37end
38screenGui:Destroy()
39