I want to make a loading that’s shaped like a circle but increases like a bar like in the image below.
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!
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:
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.
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.
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)