How can I make a Circular Progress Bar with a custom Image?

[CybeCC]

Hello,
I am trying to change my UI and I have decided to put the “Heat” Bar around the crosshair and now I am having a few issues because I don’t know how to make Circular Bars. I have 2 variables/numbers related to this, which are “Heat” (the current heat) and the “MaxHeat” which is not literaly the max heat allowed but when it gets over the max heat, the guns firerate gets slower.
I have 2 variants of the bar image, first is the full circle and the other is the right half.

Now, I want it to look like this:

Percentage over 100%:

Percentage over 0% and up to 100%:

My first problem is that when I it’s lower than 50% it still displays the other bar

My second problem is that it if I rotate it by a number not dividely 45% the spaces get covered up

Here is my explorer:

The “HeatBars” Frame can be ignored, everything under “MainHeat” is important, “Mainheat” is the Background.

How can I achieve this using code and UI design?
I also have already tried some code but it mostly didn’t work, so that’s why I am now asking here.

Heres the a code snippet related to this but it shouldn’t really matter I’d assume:

local heatPercentage = (dataConfig:GetAttribute(prefix .. "Heat") or 0) / (dataConfig:GetAttribute(prefix .. "MaxHeat") or 1)
if heatPercentage > 1 then
	local rotation = (heatPercentage - 1) * 360
	coldBar.Visible = true
	overheatBar.Visible = true
	heatWarning.Visible = true
	
	rightColdBar.Rotation = 0
	leftColdBar.Rotation = 180
	
	rightOverheatBar.Rotation = 0
	if rotation > 180 then
		leftOverheatBar.Visible = true
		leftOverheatBar.Rotation = math.clamp(rotation, 0, 360)
	else
		leftOverheatBar.Visible = false
	end
elseif heatPercentage > 0 then
	local rotation = heatPercentage * 360
	coldBar.Visible = true
	overheatBar.Visible = false
	heatWarning.Visible = false

	rightColdBar.Rotation = 0
	if rotation > 180 then
		leftColdBar.Visible = true
		leftColdBar.Rotation = math.clamp(rotation, 0, 360)
	else
		leftColdBar.Visible = false
	end
else
	heatWarning.Visible = false
	coldBar.Visible = false
	overheatBar.Visible = false
end

[BendsSpace]

Here is how people typically do bars like this:

For each colored circular bar:

• Split the circle in half and have an image for each half
• Place a UI gradient centered in the middle of the circle for each image with one half 100% transparent
• Rotate the UI gradient to hide and show different parts of each half-circle image

Here is a picutre showing what that looks like for one of the half images:

[CybeCC]

Yeah that makes sense, I’m gonna try that, thanks

[CybeCC]

Yep, it worked, I did something wrong but it works as intended so thanks