Loading Circle GUI

[rwishes (kuba)]

Greetings! I want to create a loading circle script that will make something like the gif below. Could someone help me make this?

[Omnipotent_Corrupted (red)]

You can try adding a background that fills the circle background. Then, you can try adding a UIGradient with a UITransparency switching between values. You could try using math.pi and math.sin

[JuanGamerPlayz_RBLX (Juan)]

Hiya @rwishes! Hope you are having a good ol’ day!

First, think of the production of the circle: “How can I make it?” – You can do it in software specialized in illustrations such as Adobe Illustrator, for instance, but as this is simple, let’s do it on Figma! (

)

After the whole process of registering your account, create a draft by selecting the button on the top right of the screen called “Design file”. As you press it, you encounter an empty screen where you can put anything, from shapes to texts:

Let’s grab a circle geometry by clicking the icon showing an outlined cube and selecting the circle. If you believe that you want to do it flexibly, you can use the shortcut by pressing the key O on your keyboard and then click on the empty screen:

By clicking on the empty screen, it will create a circle shape of 100 for both width and height. If you believe that you want to change to another size, you can select the screen and drag your cursor to change the dimension. If you want to be consistent while also being huge, make sure to also hold SHIFT. This whole process and method is similar to Adobe Illustrator.

Now, to make the circle thin, just like what we see on the GIF, we need to change the arc. To do this, hover your cursor on the shape and you will notice a tiny white circle on the corner. This is where you can change where the circle starts (Start), finishes (Sweep), and how thin or thinner (Ratio) it can be:

We are going to simply modify the ratio of the circle and change its color based on the GIF (not necessarily, just a sample. You can change it to what you’re thinking in mind). We are going to drag the GIF to the tab of Figma and you should be able to end up like this:

Selecting the circle, on the right side of the screen, you can see that there is a whole area called “Design”. Think as a viewport of “Properties” whenever selecting an Instance on Roblox Studio. We are going to select the part “Fill” and pick the color we are looking forward to by clicking on the GIF:

“What about the purple thing on the circle? How can I do it?” – To do it, you need to duplicate the shape by pressing the keys CTRL + D. Do the same process to change the color of the geometry and change the arc from either the start or sweep:

We are going to select both of the shapes we have on the screen and group them by pressing the keys CTRL + G. Both will be united as a group and you can both change their sizes together from 100 to 500, for instance. As long as it doesn’t pass the limit of 512x512 (the size to send an image to Roblox Studio), you should be okay! (In the image below, I rescaled to 256x256, which is the standard size of Roblox, but divided by 2.)

Head over to the viewport and select the last section called “Export”. There, you can select in which form you would like to export this group, from PNG to PDF. As for the area where it says 1x, this is where you define the resolution of how it would look after exporting. On my end, I will select PNG and resolution as 4x:

After pressing the button “Export”, your computer will download the picture and it will be stored in your files!

Heading to Roblox Studio, select any project you have, go to the Asset Manager tab, and utilize the Bulk Import button to import and upload the image to Roblox. Create a simple ScreenGui, a background frame with a text saying “Loading” and add an Instance called “ImageLabel” where you will change the Image to the asset ID of the image that you imported… Everything is on the Properties tab!

Insert a LocalScript within the ImageLabel, and let’s focus on constructing the coding!

Sometimes, some people (not everyone) tend to use the while true do function to create a loop. Inside the loop, they put the rotation of the ImageLabel equal to its current value plus one, indicating that it will add a value, and then add a wait(1) to indicate that it will change every second.

local imageLabel = script.Parent

while true do
    wait(1)
    imageLabel.Rotation = imageLabel.Rotation + 1
end

It is not wrong as it works, but it isn’t optimized… According to topics and discussions between developers on this forum, this strategy causes the coding to get exhausted and leads to the crash of your Roblox Studio… Even the Roblox Assistant, powered by the Creator Documentation, also informs that it is not the greatest choice. A viable alternative, for the better, is to use TweenService!

Here is a script that I made with my style (you can change it if you would like):

--[Services]--
local TweenService = game:GetService("TweenService")

--[ImageLabel]--
local imageLabel = script.Parent

--[Tween Settings]--
local tweenInfo = TweenInfo.new(
	5,
	Enum.EasingStyle.Linear,
	Enum.EasingDirection.In,
	-1,
	false,
	0
)

local Tween = TweenService:Create(imageLabel, tweenInfo, {Rotation = 360})
Tween:Play()

And there you have it! A working loading circle and fully rotating as you wanted:

---

Hopefully, this could help you out a lot!

[Omnipotent_Corrupted (red)]

That’s amazing! You really helped a lot here.