Circular Timer GUI? [SOLVED]

Using a decal may prove the simplest.

You can, of course, construct a ring of TextLabels using the Rotation property and color them however you want.

It looks a bit strange, because ROBLOX doesn't allow pixel-perfection in GUIs (not anti-aliased and all values must be integral), but it's a start.

Animating this ring by changing the colors of each looks a bit odd, though, since they overlap and are not purely one pixel wide.

To fix this, we can each into a sort of linear-loading bar that starts draining as soon as the one next to it completely drains.

Here's a demo (drop it into a ScreenGui and it'll work)

local num = 360;
local radius = 80;
local thick = 5;

local BLUE = Color3.new(0,2/3,1);
local GRAY = Color3.new(0.3,0.3,0.3);

local dots = {};

local h = 2* radius * math.tan( math.pi * 2 / num  / 2);
-- Trig determining height of a TextLabel that is `radius`
-- from the center at the outside edge

local text = Instance.new("TextLabel",script.Parent);
text.Name = "Text";
text.BackgroundTransparency = 1;
text.Font = "SourceSansBold";
text.FontSize = "Size48";
text.TextColor3 = GRAY;
text.Position = UDim2.new(0.5,0,0.5,0);
text.Size = UDim2.new(0,0,0,0);

for t = 0, 1, 1/num do
	local theta = math.pi * 2 * t;
	local a = Instance.new("TextLabel",script.Parent);
	a.Size = UDim2.new(0,thick + 1,0, h + 1.5);
	a.Position = UDim2.new(
		0.5, math.cos(theta) * (radius - thick/2) , 0.5, math.sin(theta) * (radius - thick/2)
	);
	a.Text = "";
	a.Name = "ClockEdge";
	a.BorderSizePixel = 0;
	a.Rotation = t * 360 + 0.5;
	a.BackgroundColor3 = GRAY;
	local sub = a:clone();
	sub.Parent = a;
	sub.Size = UDim2.new(1,0,0.25,0);
	sub.Position = UDim2.new(0,-1,0,-1);
	sub.BackgroundColor3 = BLUE;
	sub.Rotation = 0;
	sub.Name = "Sub";
	table.insert(dots,a);
end

while wait() do
	local t = tick();
	t = t / 3;
	t = 1 - t % 1;
	-- `t` is amount filled
	for i = 1, #dots do
		--`dots` is list of all text labels
		local progress = (i - 1) / #dots;
		local nextp = (i) / #dots;
		
		local d = dots[i];
		-- progress is percentage around the circle
		-- that dot `d` is
		local u = t - progress;
		u = u / (nextp - progress);
		u = math.max(0,math.min(1,u));
		d.Sub.Size = UDim2.new(1,2, u, 2);
		d.Sub.Visible = u > 0;
	end
	text.Text = math.floor(t * 60);
end

If I can make any part of that code more clear, let me know, I know it doesn't have as much explanation as would be nice.

Using the above code:

• radius is the outer radius of the circle [pixels]
• thick is the thickness of the circle (so radius - thick is the inner radius) [pixels]
• text is just a TextLabel with a number in it, so it could be removed and you could easily add your own
• t represents a percentage full so 0 is all empty (gray) and 1 is all full (blue). If you have 45 seconds of 60 remaining, then t = 45 / 60. If you haven't started and are keeping it full, just let t = 1