# Example Project: Fade-in and fade-out column, progress bar, text-based loading animations (proof of concept) **URL:** \ **Category:** Questions about Thunkable X\ **Created:** [January 30, 2019, 4:09am UTC](https://community.thunkable.com/t/example-project-fade-in-and-fade-out-column-progress-bar-text-based-loading-animations-proof-of-concept/66762 "2019-01-30T04:09:03Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![Kyle\_Williams](https://avatars.discourse-cdn.com/v4/letter/k/b2d939/32.png) [@Kyle\_Williams](https://community.thunkable.com/u/Kyle_Williams)\ **Post date:** [January 30, 2019, 4:09am UTC](https://community.thunkable.com/t/example-project-fade-in-and-fade-out-column-progress-bar-text-based-loading-animations-proof-of-concept/66762/1 "2019-01-30T04:09:03Z")
I thought this might be handy for someone. Just playing around with trying to do animations within Thunkable without using Lottie files. These are only tested in iOS but most likely work in Android. (Update! The fade-in column does not work correctly on Android; use **[this version](https://x.thunkable.com/copy/265fa613b6db2c81c670edfa946337e5)** to see the other examples in Android). **Project link** [https://x.thunkable.com/copy/179edd8cce5e70cf619eae8c40a721a4](https://x.thunkable.com/copy/179edd8cce5e70cf619eae8c40a721a4) **Fade-in column** This fades in a column that is not visible when the app first starts. Could be useful for smooth transition between a settings screen or similar. Biggest hold-up here is that you have to change the color of all items in the column—hopefully Thunkable team will add opacity control to containers, so you can lower the opacity of all items in the container simultaneously. (note: the column that fades in is set to 112% height (among other customizations) so that it works correctly on my test device, iPhone X). ![fadeInColumn](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/9/19891c209662c8e4caff5d40687c5c36c152c438.png) **Progress bar** An attempt at animating a progress bar within Thunkable, not using Lottie animations. A row within a row changes its width as the animation plays. This could be hacked apart and used to progress a bar as each of several functions run during a splash screen, etc. Just a proof of concept so not really functional as a real progress bar in this example. ![progressBar](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/a/9aeed5e2393a030871c53f0ad5763039baaa0036.png) **Text-based loading animations** Simple loops that use emoji and unicode to show something like a loading symbol. Not super impressive but maybe useful for someone. ![textLoadingIcons](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/3/a3845387e14256f78bb5b012c54f6f6c845bd122.png) * * * I thought some of this may be useful to someone so just sharing here in case it is. Thanks! ---
**Author:** ![lflfm](https://avatars.discourse-cdn.com/v4/letter/l/dec6dc/32.png) [@lflfm](https://community.thunkable.com/u/lflfm)\ **Post date:** [January 30, 2019, 8:09am UTC](https://community.thunkable.com/t/example-project-fade-in-and-fade-out-column-progress-bar-text-based-loading-animations-proof-of-concept/66762/2 "2019-01-30T08:09:15Z")
Wow, awesome stuff! This will definitely be very useful for a lot of people… This post should be pinned turned into a (or some) built-in tutorial(s)! ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [January 31, 2019, 4:10am UTC](https://community.thunkable.com/t/example-project-fade-in-and-fade-out-column-progress-bar-text-based-loading-animations-proof-of-concept/66762/3 "2019-01-31T04:10:41Z")
Great suggestion @lflfm ---
**Author:** ![danyklein](https://avatars.discourse-cdn.com/v4/letter/d/c37758/32.png) [@danyklein](https://community.thunkable.com/u/danyklein)\ **Post date:** [January 31, 2019, 3:28pm UTC](https://community.thunkable.com/t/example-project-fade-in-and-fade-out-column-progress-bar-text-based-loading-animations-proof-of-concept/66762/4 "2019-01-31T15:28:59Z")
Thank you 🙂 ---
**Author:** ![rojored12](https://avatars.discourse-cdn.com/v4/letter/r/47e85d/32.png) [@rojored12](https://community.thunkable.com/u/rojored12)\ **Post date:** [January 31, 2019, 7:18pm UTC](https://community.thunkable.com/t/example-project-fade-in-and-fade-out-column-progress-bar-text-based-loading-animations-proof-of-concept/66762/5 "2019-01-31T19:18:24Z")
How did you add the emojis? ---
**Author:** ![Kyle\_Williams](https://avatars.discourse-cdn.com/v4/letter/k/b2d939/32.png) [@Kyle\_Williams](https://community.thunkable.com/u/Kyle_Williams)\ **Post date:** [February 1, 2019, 10:37pm UTC](https://community.thunkable.com/t/example-project-fade-in-and-fade-out-column-progress-bar-text-based-loading-animations-proof-of-concept/66762/6 "2019-02-01T22:37:40Z")
In MacOS, I was able to just copy/paste them from a Unicode list on the web. ---
**Author:** ![Red\_Panda](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/red_panda/32/19387_2.png) [@Red\_Panda](https://community.thunkable.com/u/Red_Panda)\ **Post date:** [February 1, 2019, 11:41pm UTC](https://community.thunkable.com/t/example-project-fade-in-and-fade-out-column-progress-bar-text-based-loading-animations-proof-of-concept/66762/7 "2019-02-01T23:41:22Z")
On windows you can press windows + . ---
**Author:** ![rojored12](https://avatars.discourse-cdn.com/v4/letter/r/47e85d/32.png) [@rojored12](https://community.thunkable.com/u/rojored12)\ **Post date:** [February 1, 2019, 11:56pm UTC](https://community.thunkable.com/t/example-project-fade-in-and-fade-out-column-progress-bar-text-based-loading-animations-proof-of-concept/66762/8 "2019-02-01T23:56:17Z")
Thanks to both! ---
**Author:** ![io.nut.ilie](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/io.nut.ilie/32/51367_2.png) [@io.nut.ilie](https://community.thunkable.com/u/io.nut.ilie)\ **Post date:** [January 29, 2020, 6:57pm UTC](https://community.thunkable.com/t/example-project-fade-in-and-fade-out-column-progress-bar-text-based-loading-animations-proof-of-concept/66762/9 "2020-01-29T18:57:47Z")
**Amazing!** Thank you very much! How can I make the progress bar goes backwards? ![1](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/d/ed0a77b1eefb79853650ae22bbd21920ba065601.png) ---
**Author:** ![ivrifogelsaq](https://avatars.discourse-cdn.com/v4/letter/i/ee59a6/32.png) [@ivrifogelsaq](https://community.thunkable.com/u/ivrifogelsaq)\ **Post date:** [February 13, 2020, 12:30pm UTC](https://community.thunkable.com/t/example-project-fade-in-and-fade-out-column-progress-bar-text-based-loading-animations-proof-of-concept/66762/10 "2020-02-13T12:30:03Z")
thank you so, so, much! ---
**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\ **Post date:** [February 13, 2020, 12:40pm UTC](https://community.thunkable.com/t/example-project-fade-in-and-fade-out-column-progress-bar-text-based-loading-animations-proof-of-concept/66762/11 "2020-02-13T12:40:20Z")
You can have the `countTo250` variable change by -1 is you want to have a count down…but then your should probably rename it `countTo0` to make it more descriptive. ---
**Author:** ![io.nut.ilie](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/io.nut.ilie/32/51367_2.png) [@io.nut.ilie](https://community.thunkable.com/u/io.nut.ilie)\ **Post date:** [February 13, 2020, 12:52pm UTC](https://community.thunkable.com/t/example-project-fade-in-and-fade-out-column-progress-bar-text-based-loading-animations-proof-of-concept/66762/12 "2020-02-13T12:52:31Z")
Amazing logic 🙂 @domhnallohanlon **Thank you!** ---
**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\ **Post date:** [November 8, 2024, 11:40am UTC](https://community.thunkable.com/t/example-project-fade-in-and-fade-out-column-progress-bar-text-based-loading-animations-proof-of-concept/66762/14 "2024-11-08T11:40:59Z")