How to fix these blank strips in this circular progress Gui?

I borrowed the idea from:

… and I created my own script for circular progress.

The idea is simple: there are 2 frames within which the UIGradiant.Rotation property will be updated:

  1. Frame2 (from 0 to 180 degrees)
  2. Frame1 (from 180 to 360 degrees)

So, for example, if the current progress 75%, Frame2 will be at its maximum (180) and Frame1 will be with 270:

However, there’s a visual problem, these blank strips when the rotations are not started (Frame2 = 0 and Frame1 = 180):


I’ve tried a lot of things, but I didn’t get good results.
Does anyone have any simple and logical ideas to solve this?

Here the current samples project to check:
Baseplate.rbxl (29.5 KB)

I’m not sure how to fix that if you use scale instead of pixel, maybe detect size change and add 1 if number is odd (?).

What’d happen if you were to set the gradient’s .Enabled property to false and change it to true whenever the circle starts to appear?

It should be something simple, uh?
Did you test what you suggested, using the file I attached?

Now I did, haha. Took a second to understand the layers.

My previous guess/suggestion doesn’t work as the part of the circle disappears. What did work however, was to turn the ImageLabel’s ImageColor3 to roughly the same shade as the Gradient.

It still leaves you with thin, black lines as they overlap (double layers make a darker colour), but it helps a lot.

Might be a bit of an alternative solution, so you may want to await someone else’s response if this isn’t exactly what you’re looking for!

No way.
I’ll replace my current circular progress bar for this model, which is simpler and objective: