How to make something like this?

Help and Feedback Art Design Support
,
#1

I want to make a loading that’s shaped like a circle but increases like a bar like in the image below.
Orb4

If it is square it would be really easy, but when it comes to the circle, I can’t figure the way to do it. I’ve tried using an image label with a circle png image then tween position only the y-axis but the result is it comes out badly and not what I expect. I’m new to GUI so, all the answers are welcome. Thanks!

1 Like
#2

I think I found how they did it. They’ve put in the blue circle the grey circle, but it’s uploaded as image and probably using Slice image mode to reduce size. That’s probably why there is some blue here:
image

#3

I never try slice before, can you provided step by step? I read the API but still have no idea how to apply it to the circle.

#4

Sorry, I didn’t test and it was not working, so I found something else, using an UIGradient to change the transparency.

image
image1356×348 52.7 KB

2 Likes
#5

I believe they could just be using an image with a hole in it and a blue square behind that, then they just tween the position of the square and it fills up the hole.

2 Likes
#6

Wow, that looks really great, but is it possible to be manipulated in the script? Because I want it to have a smooth transition. Thank you so much, that’s really close to my ideal design.

#7

I kinda get what you mean, but I want it to have just pure circle.

#8

Yes, because you can use NumberSequences for the Transparency property.
It can’t directly be tweened, so I’ll give you my secret tip… tween a NumberValue and do something like:

-- Considering val the number value.
val.Changed:Connect(function()
  UIGradient.Transparency = NumberSequence.new{
    NumberSequenceKeypoint.new(0, 0),
    NumberSequenceKeypoint.new(val.Value, 0),
    NumberSequenceKeypoint.new(val.Value+.001, 1),
    NumberSequenceKeypoint.new(1, 1)
  }
end)
4 Likes
#9

TYSM, you’ve help a lot. I really appreciate it.