PcoWSkbVqDnWTu_dm2ix

Custom Loading Screens

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.

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:

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.

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.

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.

Removal on Load

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

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