# \[Solved\] How Do I Make A Circular progress bar

**URL:** <https://community.thunkable.com/t/solved-how-do-i-make-a-circular-progress-bar/2765197>\
**Category:** Questions about Thunkable X\
**Tags:** help\
**Created:** [January 2, 2024, 12:57am UTC](https://community.thunkable.com/t/solved-how-do-i-make-a-circular-progress-bar/2765197 "2024-01-02T00:57:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![henrytmaclanefa](https://avatars.discourse-cdn.com/v4/letter/h/59ef9b/32.png) [@henrytmaclanefa](https://community.thunkable.com/u/henrytmaclanefa)\
**Post date:** [January 2, 2024, 12:57am UTC](https://community.thunkable.com/t/solved-how-do-i-make-a-circular-progress-bar/2765197/1 "2024-01-02T00:57:45Z")

</div>

I am trying to make an app where it tracks data for a task and I am having trouble making a circular progress bar is anyone able to help me with this?

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [January 2, 2024, 2:29am UTC](https://community.thunkable.com/t/solved-how-do-i-make-a-circular-progress-bar/2765197/3 "2024-01-02T02:29:15Z")

</div>

There are two ways you can do this:

1. Create/find a graphic outside of Thunkable that has stages of a circular progress indicator. For example, [this](https://www.gettyimages.com/detail/illustration/round-progress-bar-set-of-circle-percentage-royalty-free-illustration/1248311099?adppopup=true). It wouldn’t be hard to make something like that in Illustrator or to pay someone on Fiverr to make it for you. Then constrain an image’s background picture to join filename + app variable ImageFrameNum and increase ImageFrameNum by 1 on a timer so that you get images like filename1, filename2, filename3, etc. Essentially, you’re making your own animation.

2. Create a graphic of a half circle including a status arc and a graphic of a half circle that matches the background color. Stack them on top of each other with the background color on top and rotate the top half circle to expose the arc below. This would need to be done in a Canvas component.

I don’t think I still have the project I mentioned here but this is another method of using a “needle” to display progress radially: [How to rotate a needle of a clock / gauge?](https://community.thunkable.com/t/how-to-rotate-a-needle-of-a-clock-gauge/1674756).

---

<div class="post-metadata">

**Author:** ![henrytmaclanefa](https://avatars.discourse-cdn.com/v4/letter/h/59ef9b/32.png) [@henrytmaclanefa](https://community.thunkable.com/u/henrytmaclanefa)\
**Post date:** [January 2, 2024, 3:24am UTC](https://community.thunkable.com/t/solved-how-do-i-make-a-circular-progress-bar/2765197/4 "2024-01-02T03:24:12Z")

</div>

Thank you so much!

---

<div class="post-metadata">

**Author:** ![matt\_conroy](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/matt_conroy/32/150843_2.png) [@matt\_conroy](https://community.thunkable.com/u/matt_conroy)\
**Post date:** [January 2, 2024, 3:56pm UTC](https://community.thunkable.com/t/solved-how-do-i-make-a-circular-progress-bar/2765197/5 "2024-01-02T15:56:48Z")

</div>