How To Make a Circular Progress Bar | Roblox Studio | ROBLOX

In this video, I show how to make a circular progress bar for your game. This video requires a basic understanding of Roblox UI and scripting.
Model: create.roblox....
Be sure to subscribe and turn on post notifications.
✔️ CLICK HERE: bit.ly/2ROfjhe
💬 JOIN MY ROBLOX GROUP: group.dynabyte....
💬 JOIN MY DISCORD SERVER: invite.dynabyte...

[@pumpkii]

This mans screen is longer than my car 💀

[@1Virez]

widescreens are strange indeed

[@bruhblox_]

bros screen ratio is 1:10000000000000

[@smartiii]

How would I be able to change this into a cooldown? :-

[@goelrads]

Here Is The Script If You Get Stuck local tweenService= game:GetService("TweenService") local progress = script.Parent local left = progress:WaitForChild("Left"):WaitForChild("Circle") local right = progress:WaitForChild("Right"):WaitForChild("Circle") local center = progress:WaitForChild("Center") local percentage = Instance.new("NumberValue") percentage:GetPropertyChangedSignal("Value"):Connect(function() local rotation = math.floor(math.clamp(percentage.Value * 3.6, 0, 360)) center.Percentage.Text = math.floor(percentage.Value * 10) / 10 .. "%" right.UIGradient.Rotation = math.clamp(rotation, 0, 180) left.UIGradient.Rotation = math.clamp(rotation, 180, 360) end) task.wait(1.5) local tween = tweenService:Create( percentage, TweenInfo.new(1, Enum.EasingStyle.Quart, Enum.EasingDirection.Out), { Value = math.random() * 100 } ) tween:Play() -- written by cakegun1234

[@pixerking]

How to make it for hp?

[@goelrads]

@@pixerking make local percentage = game.Players.LocalPlayer.Character:WaitForChild(“Humanoid”).Health

[@Stiexeno]

I found solution how to get rid of these glitchy lines in the center. Just disable Right is value is 0 and disable Left if value is less than 50 local rotation = math.floor(math.clamp(self.Progress.Value * 3.6, 0, 360)) self.Right.Frame.UIGradient.Rotation = math.clamp(rotation, 1, 180) self.Left.Frame.UIGradient.Rotation = math.clamp(rotation, 180, 360) self.Right.Visible = self.Progress.Value > 0 self.Left.Visible = self.Progress.Value >= 50

[@12abrt]

I can finally code some cool gamer games

[@aquakeyn]

I think the reason why there is a blue line in the middle is the border size pixel that you didn't set to 0. Hope this can help...

[@goofiestproductions]

real

[@DynabyteGames]

It has to due with how Roblox handles UI positions with the AnchorPoint property on the backend.

[@workindad]

I changed the tween a bit to make it like a progress bar. for i = 1, 10 do -- can use while loop or runservice too print("Tween no."..i.." starting") local tween = TweenService:Create( percentage, TweenInfo.new(1, Enum.EasingStyle.Linear, Enum.EasingDirection.Out), {Value = 100} ) tween:Play() tween.Completed:Wait() task.wait() percentage.Value = 0--reset end

[@maxumunum1926]

Works, thank you so much!

[@bradzandmaxplays]

Also add the preload stuff so it actuals loads the game lol but cool amyways

[@Spooky.Studios]

you could also use ImageLabel instead of Frame for the Circle frames inside Left & Right and make the image this: rbxasset://textures/ui/Controls/RadialFill.png i'm not sure what it exactly changes but might be a fix for the offset or a more smooth progress bar (that is what they use for the circle inside the proximity prompts)

[@bhz-z]

thx

[@voblast1842]

thanks omg

[@killingeveryonerc]

Could you include script in the description next time? Thanks for the tutorial btw!

[@bradzandmaxplays]

Just type it out u gotta learn some how gonna get it the easy way

[@gameknight_10]

how to make it go backwards or inverse it

[@gameknight_10]

@xarciti i've tried but it dont work

[@sinkzscs]

@@gameknight_10 just mess around with the values

[@FadedPgn]

For some odd reason it dosent work my code is just the same as yours im no sure whats happening. Can i please get some help?

[@Puluga]

So basically some dev vids don’t show what you need to do before doing the code so basically there might be a setting that is not letting the script work or whatever is happening to you hope this helps a little

[@thefireph0enix]

I created a circle progress bar before seeing this tutorial, difference between this and my is that I used images, black overlays, and etc. Probably should of gone with this since it just uses frames and forgot I could make circles with ui corner but idk if I feel like replacing it right now and reconfiguring everything.

[@AlaaBouramdane]

how can i make this for the health of the character

[@DynabyteGames]

Have it update whenever the player’s health changes using :GetPropertyChangedSignal() on the humanoid for Health property.

[@xnceu]

you say um and uh too much