# Progress Bar in Thunkable?

**URL:** <https://community.thunkable.com/t/progress-bar-in-thunkable/3162978>\
**Category:** Questions about Thunkable X\
**Created:** [August 28, 2024, 4:13am UTC](https://community.thunkable.com/t/progress-bar-in-thunkable/3162978 "2024-08-28T04:13:17Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jake-cohen](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jake-cohen](https://community.thunkable.com/u/jake-cohen)\
**Post date:** [August 28, 2024, 4:13am UTC](https://community.thunkable.com/t/progress-bar-in-thunkable/3162978/1 "2024-08-28T04:13:17Z")

</div>

Any way to make a progress bar in Thunkable without using like images and code and making certain parts of an image visible as the percentage/progress increases or whatever to simulate a progress bar?

---

<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:** [August 28, 2024, 3:50pm UTC](https://community.thunkable.com/t/progress-bar-in-thunkable/3162978/2 "2024-08-28T15:50:01Z")

</div>

Hi @jake-cohen, are you asking if there is a way to make a progress bar without any code in the blocks?

---

<div class="post-metadata">

**Author:** ![jake-cohen](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jake-cohen](https://community.thunkable.com/u/jake-cohen)\
**Post date:** [August 28, 2024, 5:39pm UTC](https://community.thunkable.com/t/progress-bar-in-thunkable/3162978/3 "2024-08-28T17:39:27Z")

</div>

is there any way to make a progress bar? i only see a way to do it with uploading several images of a progress bar and making them set to not visible then as progress is made, you show more images

that is what I am asking, sorry for making it confusing

---

<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:** [August 28, 2024, 6:30pm UTC](https://community.thunkable.com/t/progress-bar-in-thunkable/3162978/4 "2024-08-28T18:30:10Z")

</div>

You could use two identical buttons to make a progress bar, one button would be for the 0% progress state  
 ![Screenshot 2024-08-28 at 2.15.10 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/3/538b12c4bfd3afb59470f6ecf88efd07f6a9aae7.png)  
And other to show 100% progress  
 ![Screenshot 2024-08-28 at 2.15.52 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/2/02fa3a1b6d1ae1c016ebb70c92393a42032d4623.png)

The only difference is the background color for each. To show the completion progress, you can just adjust the width of the progress (green) button. The math to do this is always: `width of bar x progress (0-100) ÷ 100`.

So, we’re 50% done and the width of the bar is 300px. 300 x 50 ÷ 100 = 150px. Progress should always be a number saved as a variable. Then each time you calculate progress, you can always have the updated variable stored and ready for the new calculation.

---

<div class="post-metadata">

**Author:** ![jake-cohen](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@jake-cohen](https://community.thunkable.com/u/jake-cohen)\
**Post date:** [August 28, 2024, 7:21pm UTC](https://community.thunkable.com/t/progress-bar-in-thunkable/3162978/5 "2024-08-28T19:21:29Z")

</div>

any way to make a circular progress bar - just another idea, might be a stretch

---

<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:** [August 28, 2024, 7:27pm UTC](https://community.thunkable.com/t/progress-bar-in-thunkable/3162978/6 "2024-08-28T19:27:49Z")

</div>

Not as easy, but possible. I’d check the options Tatian has provided in this thead:

> [@\[Solved\] How Do I Make A Circular progress bar](https://community.thunkable.com/t/solved-how-do-i-make-a-circular-progress-bar/2765197/3):
>
> There are two ways you can do this: 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 an…

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [November 26, 2024, 7:28pm UTC](https://community.thunkable.com/t/progress-bar-in-thunkable/3162978/7 "2024-11-26T19:28:13Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
