Roate a line in a circle were the line gets longer

[Bear23913 (BearBoi)]

Hiya devs, im making something experimental, where im trying to roate an image like shown in the image below,

Btw the line would get longer as the start point i guess at the top center wouldnt necesarily move

I have no clue how id even start other then creating a tween, if anyone has any suggestions please do let me know!

[wwwaylon09_backup (wwwaylon09)]

Are you trying to create a circular progress bar similar to the one that ProximityPrompts use?

[Bear23913 (BearBoi)]

Yes, i forgot that would’ve been an esier way to explain it,

[iiau]

Circular/Radial Progress

Hello, Recently, I made a Model which could be useful to most games. Yep, you read the Topic, it’s a Circular Progress. Simple and fast, so I decided to share it. [Circular] I made all necessary things for Circular Progress, such as: Allow to change Color and Transparency of each part. Can be used with any Decal. Can change Circular Progress direction. To make Circular Progress work, you only need to change percentage between 0 and 100. You can also use tween on percentage. If it is great…

There is already a resource for it. Please do not post without doing some research.

[wwwaylon09_backup (wwwaylon09)]

EDIT:
Here’s the UI if you don’t want to repeat the steps:
CircularProgressBar.rbxm (6.5 KB)

Ok here’s what you can do to create this:
Create something to hold the elements:

Create 2 halves of whatever you use to hold the elements:

Make an image label (I’m using rbxassetid://10928806245) in the first half and set the size so that it fills the entire area of whatever the half is parented to:

Turn on the “ClipDescendents” property of the half the image label is parented to and you should have half a circle:

Repeat this for the other side:

Put a UI gradient in each of the image labels and set the transparency to this:

Set the rotation property of the UI gradient to 180 for the right side and you should have this:

Now, by changing the rotation property of either UI gradient, we can make the circle whatever size we want (I set the left gradient’s rotation to -50 and the right gradient’s rotation to 250):

If you have any questions, feel free to ask.