You'll need to start by designing your loading screen.

You can design your loading screen in any way you see fit.

However, it is important to name the objects

exactly as shown.

The slightest misspelling can cause your code to break,

so it is important to double-check.

For the sake of time,

we are going to speed up the design of the user interface.

Feel free to pause at any time.

It is important to make sure that

the "ResetOnSpawn" property

for your screen UI is not ticked,

while the "IgnoreGuiInset" property should be ticked.

The loading bar size should also be

set to (0,0), (1,0)

so that it is hidden when a player first joins your game.

After you are satisfied with your design,

right-click on the screen UI object

and click "Insert Object,"

followed by "LocalScript."

A local script will allow you to write code

to make sure that your loading screen will function.

Double-click on your local script to start editing it.

Highlight everything inside

and delete it to start with a clean slate.

To keep this short,

we are going to speed through the writing of the code,

and then we'll break down what each part does.

You can find the code

in the description below to follow along.

The topmost section is

where it will store all your variables.

Variables are simply there to help you access

their contents more easily later on.

The next section is what will make your loading bar move.

The function called ResizeBar

will smoothly resize your loading screen

if you give it a number.

Then we are simply turning off all of the Roblox GUIs,

which include the chat, leaderboard, health bar, and more.

This is done to make sure

that your loading screen looks cleaner.

Afterwards, the loading screen is enabled

and the loading bar moves for the first 10%.

Next, we need to make sure to wait

for the player's avatar to load.

After their avatar loads,

the loading bar will move to 40%.

The final step is to wait

for any images and other assets to load.

This is done by using the ContentProvider service.

Once this is done,

the loading bar will finish up at 100%.

Lastly, the player is notified that the game has loaded,

and we will give them the default Roblox GUIs back.

The loading screen is then removed

so that the players can enjoy your game.

Finally, click "Play" to test out your loading screen.