I need help to make a loading bar and change the background until it reaches 100%

Hello Developers.

Can you help me make a loading bar with background images that changes while the loading bar reaches 100%

It’s for a game I’m developing. :smile:

If anyone knows please answer this post :smile:

Thank you :wink:

You can first make a table with all the decal ids that you want to use. Then as it is loading you could use a loop to swap the ids every few seconds.

1 Like

For the loading bar you can use a simple TweenSize.

local thing = --/put location of loading bar here
thing:TweenSize(Udim2.new(0,0,0,0), 'Out', 'Linear', 1) --/change number to how long you want loading to be

Then for the decal changing you can make a table with the images and just do a loop.

local ImagesTable = {2592758902, 258275982, 2579257257} --/put decal ids here
local background = --/location of the background imagelabel
local timesleft = 5 --/ 1 = 3s
    background.Image = ImagesTable[math.random(1,3)] --/keep 1 and then change 3 to however much decals are in the table.
    timesleft = timesleft - 1
until timesleft = 0

This is probably not the best way to achieve your goal, but it works. I hope… I’m not on studio rn, so I can’t test…

We can’t help you make it because that’s not the purpose of this category. We can, however, provide you with advice that you should take in terms of reaching this end goal.

The first step you’re going to want to take is to set up your Gui. It doesn’t matter how you go about doing this, so long as you have something that you think you like. Part of the Gui setup is also getting the list of images you want displayed in the background. Keep this in mind for later.

To ensure that your Gui has the images running in the background immediately, you will need to call PreloadAsync on them. This will ensure they are the first assets downloaded by the client, which will then produce the Gui you need.

Afterward, it’s up to you how to go about the rest. For looping through images, you could start a loop of images in the background:

-- Example code

local currentImage = 1

while loading do
    backgroundImage.Image = images[currentImage]
    currentImage = currentImage + 1

And for loading, you could set up a queue of assets you want to download.

A warning to you and potentially anyone else coming across this thread: do not (or stop) use RequestQueueSize as a way of determining how much your game has left to load. This makes your game wait until all first-time use assets have been downloaded.

RequestQueueSize is not an accurate representation of how much is left to be downloaded and it is a dynamic property, meaning it can sporadically increase or decrease over time depending on your game. Long loading screens are bad for UX, especially if you have a younger audience - you need to learn to work with their patience, which is fairly low.


Because RequestQueueSize is not accurate (as stated by colbert2677), you might not want a loading bar. Instead, think of the load screen as an intro screen, and display something for a few seconds until the player data gets replicated to the client. Being completely honest, nobody wants to wait more than 5 seconds on an intro screen (players already waited a few seconds for the game to load, and at that point they just want to play the game). Just a thought :slight_smile: