Help with loading screen

Hello developers,
Earlier today, I was trying to script a loading screen. I have no experience with it and hence, I need help to script it. My idea is basically for an icon to tween as if it is loading. Thank you in advance.

What exactly do you need help?

I want to script a loading screen something like this
Roblox (gyazo.com)

I do not have an idea as to how I do it.

Tutorial for the icon:

Create a black ui element big enough to cover the whole logo, parent it to the icon.
In the icon’s properties, set Clips descendants to true. Now, for the icon to reveal its colors, simply tween the black ui element from left to right, in a way that it goes from covering the icon to fully dissappearing.

Scripting the loading gui:
You may create a folder, name it to something matching, and put everything you want the loading screen to load inside the folder. Now, create a script, preferably a local script, where you do the loading process with the folder’s children.
To get the loading percentage, count the number of assets already loaded and the total amount of assets. And calculate the percentage, approximately like this:

% = numLoaded / numTotalAssets

1 Like

Step 1
Create a screen gui, put the display order on 99999 with the behavior for index on global and remove reset on spawn.

Step 2
Create a frame thats at the size of {1,0,1,0}
In that frame, make a frame, the loading bar and size it however you want .

In that frame enable clip descendants and add a inside bar with the size being
{scalelength, 0, scaleheight, 0}

Step 3
Create a local script, define the loading bar and the frame

In that script do the following parts:

local TweenService = game:GetService("TweenService")
local Info = Tweeninfo.new(0.5, Enum.EasingStyle.Linear, Enum.EasingDirection.InOut, -1, true)

TweenService:Create(yourbar.yourinsidebar, Info, {Position = UDim2.new(1,0,0,0)}:Play()

task.wait(3)

local NewInfo = Tweeninfo.new(0.5, EnumEasingStyle.Linear, Enum.EasingDirection.InOut)

TweenService:Create(yourbar, NewInfo, {Size = UDim2(currentlength, 0, 0, 0}:Play()

task.wait(2)

# Assuming script.Parent is the main frame
script.Parent:TweenPosition(UDim2.new(0,0,-2,0), "InOut", "Quint", 1.3)

Anyways, for the logo i assume they made a custom black frame with the logo carved out, imported the image of it and put the image of the logo at zindex 0 that sizes in for that effect

1 Like

Thank you so much for your help. I appreciate it a lot.

Thank you so much for your help! Thank you for taking your time and typing so much. It helped me a lot. I appreciate it.

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.