Hey fellow developers,
This is my first post in #resources:community-resources. I’ll be sharing an animated Loading UI which will contain a bar which will fill up, then it will animate to down, and a play button will appear. I know it’s kinda easy, but I designed it for those who is beginner in UI Designing or scripting the Bars! Hopefully this would help!
I’ll give a detailed information on setting it up. Follow them, or do it yourself if you’re good enough!
Step 1: Setting up the GUI
At first, you have to take the model by clicking here. Once you have taken it, make sure to put it in StarterGui. And check if the properties are set to this
Important: ResetOnSpawn must be off, and IgnoreGuiInset must be on so it can actually look cooler, and doesn’t appear if you die (Even tho we will destroy it after loading)
Step 2: Configuring Background
The background color is white in default. If you want it to change into any color, open properties of LoadingUI.Background
and change BackgroundColor3
to the color you want.
Do you want your game logo in the background, or just a simple text (logo recommended). If you want logo, then delete LoadingUI.Background.GameName
. And if you want text, then delete LoadingUI.Backround.GameLogo
.
Step 3: Editing loading bar
If you want to change color of background, open properties of LoadingUI.LoadingScreen.BarBG
and change it’s ImageColor3
to the color you want it to be.
If you want to change color of background, open properties of LoadingUI.LoadingScreen.BarBG.MainBar
and change it’s ImageColor3
to the color you want it to be. (You can’t see it because it’s width is set to 0, this is the bar which will fill)
Step 4: Editing the play button
I have added a hover effect in the play button. So you have to edit the hover button as well.
To edit the color of the play button’s background, open properties of LoadingUI.Play.PlayButton.Background
and change it’s ImageColor3
. To change the color of the button when hovered, do the same for LoadingUI.Play.PlayButton.Hover
And you’re done! Congratulations! Now play the game to see what a masterpiece you just made!
IMPORTANT NOTE
Because I have scripted it, there are some things you must not do. Doing so will result the loading UI not work.
- Do NOT rename anything. Absoloutely Anything.
- Do NOT change the position or size of the bar.
- Do NOT change any script inside the model.
- This is just a simple UI, it’s fake. It actually doesn’t wait for a object to load but just welcome user with a UI. So don’t hate it.
- If you want to add any decoration, make sure to add it inside
LoadingUI.Background