How to make a progress bar for my loading screen?

What do you want to achieve?
I want to achieve a loading screen that has a little progress bar at the bottom. I have made most of the screen.
What is the issue?
I can’t find a way to do it without making a big script using lots of Frames.

The code for the loading screen is here

script.Parent.Enabled = true
print("Loading Game...")
script.Parent.MainFrame.AnimatedText.AnimateText.Disabled = true
script.Parent.MainFrame.AnimatedText.Text = ("Loading Complete!")
script.Parent.Enabled = false

All I need is a way of doing it. Not a full script.Because I am quite bad at scripting if you want Give me an example.

Edit: Heres a video of the loading screen here. I had music playing on YT Oops


You’re making everyone wait for 15 seconds no matter they have loaded or not. That’s now how it works. If someone loads after 5 seconds, the loading screen should get off.
This method might help:


It returns a boolean value.


Thanks for that I will try and Implement the code in now


@pranvexploder has a good point about loading, though it may take a long time to wait for the game to fully load. In terms of making the bar, you can use TweenService or GUIObject:TweenSize to re-size a frame which is a child of your background frame using,0,1,0) where percentage is a number from 1-100.


I would take a look at this post if you’re looking for a progress bar that updates correctly by using PreloadAsync on the various things needed to be loaded in.

But don’t go out of your way to ensure 100% of assets are loaded since this is rather inefficient. You are better off just checking if cruical assets are ready like the GUI and important models in the workspace


UPDATE ON PROGRESS: So, I removed some things and re-wrote the script. Here is the new code.

script.Parent.Enabled = true
print("Loading Game...")

if game:IsLoaded() then
	script.Parent.Enabled = false

The problem is now it won’t go off the screen.

I thought you said you wanted a progress bar?

If you want a progress bar just make an empty frame as the back ground and make the actual frame that will be loading and then make it as small as possible the actual loading frame and then in a script just
do a repeat until the size of the actual loading frame is the size of the background frame the actual loading frame is on and just tween the size to the size of the background of the loading frame and make sure to put the repeat until below the tween

That would perform the check only once, and it would obviously return false because your game can’t load in such a small amount of time.
Try this:

script.Parent.Enabled = true --Initially enables the loading screen
print ( "Loading game..." ) --Prints that the game is loading

repeat wait() until game:IsLoaded() --Waits until the game loads

script.Parent.Enabled = false --Finally makes the loading screen to disappear

That’s not how you make loading bars. How would you determine the size to be tweened?
@xZylter has already answered the loading bar issue here:
How to make a progress bar for my loading screen?

The size you want to be tweened is the size of the background the actual loading bar is on


1 Like

I did, but I got feedback from someone and not it’s buggy.

Alright, so how would you determine the tween duration?
Another thing with your idea is that even if I know the duration, the bar would tween uniformly, hence making a “fake” loading bar. We want an actual loading bar, that would increase its size in X when the assets actually load. PreloadAync() in a loop, providing all the assets one by one, will load all the assets, and will give you a count of the assets loaded, and the assets remaining to load. This is enough for you to tween the bar’s size.

Oh, I had a feeling you guys werent talking about that, yeah I made a fake progress bar :call_me_hand:

1 Like

Did that, but ROBLOX’s default loading screen is blocking it.

Like how you’d need to disable the default chat for making a custom chat, disable the default backpack to make a custom backpack, and disable the custom player list to make a custom one, you’d need to disable the default loading screen for your custom loading screen to show up. Here is the documentation of it:

The fastest you can get it to show up is by running the ui in ReplicatedFirst.


You can remove that by inserting a local script into ReplicatedFirst and put:

1 Like