# \[HELP\]Circular Progress Bar **URL:** \ **Category:** Blueprint\ **Tags:** unreal-engine\ **Created:** [July 20, 2015, 9:11pm UTC](https://forums.unrealengine.com/t/help-circular-progress-bar/36011 "2015-07-20T21:11:49Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![dierrera](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@dierrera](https://forums.unrealengine.com/u/dierrera)\ **Post date:** [July 20, 2015, 9:11pm UTC](https://forums.unrealengine.com/t/help-circular-progress-bar/36011/1 "2015-07-20T21:11:49Z")
Hello UE Community I want to make a circular progress bar using this pic and in this way ![Captura.PNG](https://d3kjluh73b9h9o.cloudfront.net/original/3X/b/1/b13cd045a295f50a22d4a2412b0f1161c9bc9755.png) So, the thing is, i need to make my own component? and how i can make it? ---
**Author:** ![anon44224379](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anon44224379](https://forums.unrealengine.com/u/anon44224379)\ **Post date:** [July 21, 2015, 2:01am UTC](https://forums.unrealengine.com/t/help-circular-progress-bar/36011/2 "2015-07-21T02:01:20Z")
You can do this in UMG with just an image and an animation. 1. Create a UMG widget blueprint 2. add your image to the canvas panel 3. create an animation and name it. Animate the “Angle” parameter from zero to 360 over the period of time you desire (the amount of time will determine how fast it spins) 4. in the widget graph just call play animation on the animation, based on whatever input you want. ![Capture.JPG](https://d3kjluh73b9h9o.cloudfront.net/original/3X/8/2/823eb8fe780e56855478eaaae786125e24cde539.jpeg)&stc=1 ![Capture2.JPG](https://d3kjluh73b9h9o.cloudfront.net/original/3X/1/3/136b113872af1fcdbede39fd70082ccb68409936.jpeg)&stc=1 ![spin.gif](https://d3kjluh73b9h9o.cloudfront.net/original/3X/6/4/647881eaee1ab4e87e5939bb462da60d0d5502a6.gif)&stc=1 ---
**Author:** ![dierrera](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@dierrera](https://forums.unrealengine.com/u/dierrera)\ **Post date:** [July 21, 2015, 4:43am UTC](https://forums.unrealengine.com/t/help-circular-progress-bar/36011/3 "2015-07-21T04:43:05Z")
Thank’s for the advise, but that’s not what i’m looking for I guess i don explain what i want in the right way… My bad Ok, let’s retry What i want it’s to fill the meter (yeah, that is a meter) and fill it in a circular way. This is the meter idea This is the meter in a 35% ![rsz_estrella_valorej1.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/6/c/0/6c0a8bc15821e61ec7a65b00b751dd5266dbda03.png) And again in 50% ![rsz_estrella_valorej2.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/a/f/2af1c8e5998464e32f33a3d11ef4afbe2cb8d4aa.png) This is what i want to make. But thanks ---
**Author:** ![anonymous\_user\_3a8723ae](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_3a8723ae](https://forums.unrealengine.com/u/anonymous_user_3a8723ae)\ **Post date:** [July 21, 2015, 6:25am UTC](https://forums.unrealengine.com/t/help-circular-progress-bar/36011/4 "2015-07-21T06:25:26Z")
hey there, i think the best approach for you to do this is using a dynamic texture with scalars you provide in order to modify the behaviour. Unfortunately im not good in dynamic textures, so i cant give you an example, but normally you have a value somewhere representing the percentage which “fills” your image. You then send your value to the dynamic texture (via SetScalar(by Name)). You can bind those dynamic textures to an image in UMG, so you are able to call those SetScalarParameters… ---
**Author:** ![anon44224379](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anon44224379](https://forums.unrealengine.com/u/anon44224379)\ **Post date:** [July 21, 2015, 2:48pm UTC](https://forums.unrealengine.com/t/help-circular-progress-bar/36011/5 "2015-07-21T14:48:06Z")
In that case I would think using sprite sheets for you animation would be the easiest. Here’s a tutorial on the material creation: > **[A new, community-hosted Unreal Engine Wiki](https://forums.unrealengine.com/t/a-new-community-hosted-unreal-engine-wiki/141494)** > > After over a year in maintenance mode, the official Unreal Engine Wiki is now permanently offline. These resources now live on a new community-run Unreal Engine Community Wiki — https://unrealcommunity.wiki/! You will be able to find content from... There are lots of tutorials and threads on using sprite sheets if you do a search. ---
**Author:** ![anonymous\_user\_741503d3](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@anonymous\_user\_741503d3](https://forums.unrealengine.com/u/anonymous_user_741503d3)\ **Post date:** [July 21, 2015, 2:53pm UTC](https://forums.unrealengine.com/t/help-circular-progress-bar/36011/6 "2015-07-21T14:53:16Z")
Check this thread: > **[Circled-shaped HP bar with alpha mask](https://forums.unrealengine.com/showthread.php?2470-Circled-shaped-HP-bar-with-alpha-mask)** > > Hi there. I’m attempting to create circle style bar and I thought using an angle alpha mask would be the way to go performance wise, but I just can’t manage to control it properly. This is the mask I’ve been trying to use and the bar I’ve been... And this page: > **[UMG Styling](https://docs.unrealengine.com/5.1/en-US/umg-styling-in-unreal-engine/)** > > A guide to stylizing Widget Blueprints in UMG. ---
**Author:** ![NickDarnell](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@NickDarnell](https://forums.unrealengine.com/u/NickDarnell)\ **Post date:** [July 21, 2015, 3:32pm UTC](https://forums.unrealengine.com/t/help-circular-progress-bar/36011/7 "2015-07-21T15:32:52Z")
> [@IanBreeg;337169](#): > > [Circled-shaped HP bar with alpha mask - Debugging, Optimization, & Profiling - Epic Developer Community Forums](https://forums.unrealengine.com/showthread.php?2470-Circled-shaped-HP-bar-with-alpha-mask) Yup - that’s the way to pull off this effect. ---
**Author:** ![dierrera](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@dierrera](https://forums.unrealengine.com/u/dierrera)\ **Post date:** [July 22, 2015, 6:04am UTC](https://forums.unrealengine.com/t/help-circular-progress-bar/36011/8 "2015-07-22T06:04:38Z")
Ok, the two links are great but i can’t still making what i want. But thanks, this is helpful Two things First, i want to fill the meter in this way. ![Captura.PNG](https://d3kjluh73b9h9o.cloudfront.net/original/4X/f/8/3/f839bb19da75cafd435a84634602cf83bcbe09f7.png) Second, I don’t know if you can see it but the star doesn’t have all the colors that the original texture have Here a pic of what have i done. ![Captura de pantalla (22).png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/5/7/8/578576a75ea65357fc6a21241c2701c2114f8f26.png) And thanks for all ---
**Author:** ![dierrera](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@dierrera](https://forums.unrealengine.com/u/dierrera)\ **Post date:** [July 24, 2015, 5:28am UTC](https://forums.unrealengine.com/t/help-circular-progress-bar/36011/9 "2015-07-24T05:28:42Z")
So… i think i need to make the sprite option, i guess