Basic Loading Screen UI Kit with TweenService (UI Animation)

Resources Community Resources
#1

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
image
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

Want to see how the UI looks? Play this game! Any bugs? suggestions? Message me on ROBLOX, DevForum or Discord, DevTech#2321

That’s all! Thank you for using my model in your game! :heart: Make sure to :+1: and :star: the model if it helped you!

21 Likes
#2

At least put the model link in your post…
Also, are you waiting for the objects to load in game or are you just tweening it?

#3

I’m still working on the model to publish. I’ll add it in 10-15 minutes. And I’m just tweening it, since it’s a basic loading screen and I’m not really good at scripting to make it wait for the objects to load…

Edit: Added.

#4

I don’t think people would find use to a loading screen that just tweens and does not wait for the objects to load in game. Since I can find you a lot of yt videos that use your method.
Even Roblox themself have made a developer link that explains how to achieve it.
Creating a Loading Bar based off of number of assets loaded - #3 by Fm_Trick : Rounded Loading Bar : ContentProvider | Documentation - Roblox Creator Hub

1 Like
#5

I’ll probably update it to that later. Thanks for the idea!

1 Like
#6

This isn’t a community resource, this is a community tutorial, please move this to #resources:community-tutorials.

1 Like
#7

I have included a model as well. I was confused about in which category it goes. So I put this in #resources.

#8

Actually, this belongs in the Resources category. I say this because he is merely just handing us a model and explaining what you can change and can not change. If this were to be a tutorial, he would explain how to make this from scratch, every step of the way. Thus, I can conclude that this belongs in the Resources category and not in the Community Tutorials category.

2 Likes