Circular Timer GUI? [SOLVED] [closed]

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