How do you go about making a pop the lock style minigame?

image

I’m trying to create a “Pop the Lock”-style minigame for my Roblox project, similar to the one shown here. However, I’m having trouble understanding how the UI was made. Specifically:

  • How does the white segment have rounded edges while still being able to stretch or shrink in width?
  • How is it able to smoothly rotate around the outer black ring?

I’m not sure where to begin with setting up this kind of GUI. Any guidance or breakdowns would be greatly appreciated!

I honestly think they have a separate image for each possible size of that white bar. This setup would make it so that you can move the bar around the circle simply by incrementing it’s Rotation property, which would be the most straight-forward implementation.

I don’t think it’s easily possible to make a UI like this with a variable-width rotating bar. You can get close with a Path2D instance, but it does not support rounded edges as you require