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

[rogeriodec_games]

I borrowed the idea from:

Circular/Radial Progress

Hello there again, It’s been so long now without any new features. At this time, I feel I can add it to Circular Progress now; What’s new? Starter Point is only on Top, which is boring. So I decided to allow to change Starter Point where Progress should go. There are only 2 direction for Progress to go. I added a “Middle” direction; both side will run at same time while keeping Percentage right. What changed? In the previous Circular Progress, a script still run without changing Percenta…

… 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)

[Edwi_P]

@Ioy_i

Why there’s a line when I change screen size?

this happen when Circular Progress Size is in an odd number. Well, an even number can be divided by 2, but odd number leaves with 1 pixel, and that’s why it happens.

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 (?).

[milanomaster]

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?

[rogeriodec_games]

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

[milanomaster]

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!

[rogeriodec_games]

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

Progress Circle UI Element

Addendum: I’ve created a test place that shows how you can do this using current features we have available. It’s pretty clunky, but it is possible. It only requires two textures: One full circle for the background, and one full circle for the progress bar itself. CircularProgressBar.rbxl (16.5 KB) [image] Edit (July 2021): There’s a better way to do this now, using UIGradient, which doesn’t have aliasing or pixel rounding artifacts.