# More Cloudinary Magic: progress bars! **URL:** \ **Category:** Project Showcase\ **Created:** [July 21, 2020, 1:14am UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859 "2020-07-21T01:14:06Z")\ **Posts on this page:** 19\ **Page:** 2
**Author:** ![Rosewebstudio](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/rosewebstudio/32/12261_2.png) [@Rosewebstudio](https://community.glideapps.com/u/Rosewebstudio)\ **Post date:** [July 22, 2020, 4:51am UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/21 "2020-07-22T04:51:04Z")
Square = the new round 🙂 ---
**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\ **Post date:** [July 22, 2020, 5:49am UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/22 "2020-07-22T05:49:18Z")
You just never stop to amaze me. When do you find the time to do it all? ---
**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\ **Post date:** [July 22, 2020, 6:04am UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/23 "2020-07-22T06:04:36Z")
Amazing. đź‘Źđź‘Źđź‘Ź ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [July 22, 2020, 11:01am UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/24 "2020-07-22T11:01:47Z")
Too kind, sir! Early mornings—late nights ![911E222B-CA0C-4758-9DEE-A59C84C04F61.gif](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/2/2ce58729dbc8c64682bad104743a55eeaaaee571.gif) ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [July 22, 2020, 11:42am UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/25 "2020-07-22T11:42:09Z")
The green on top of the image was bugging me…bit hard to see against the colorful pic. So I included a second white progress bar opposite the green one. To make it _seem_ like the progress bar is on top of the card and not the image. Here’s the new URL with a screenshot: `https://res.cloudinary.com/***/image/fetch/c_fill,w_900,h_600/l_square/fl_layer_apply,e_colorize,co_rgb:73c238,w_PERCENT,h_0.05,g_south_west,c_scale/l_square/fl_layer_apply,w_REMAIN,h_0.05,g_south_east,c_scale/PIC` ![Screen Shot 2020-07-22 at 7.34.40 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/8/8dce46aad2059035f2561c0a7c7fc08bfbf01f6e.png) ### Differences: - Using a 3:2 ratio so `w_900, h_600` - after the first `l_square/fl_layer_apply` I have a second that places a white progress bar opposite the green one – Placement: `g_south_east` – Width: `w_REMAIN` where `REMAIN` is `1.00-PERCENT` - Haven’t tested this with dark theme. My guess is that the white bar would stand out like a sore thumb… ![Screen Shot 2020-07-22 at 7.39.44 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/4/4347bae0eeabd9ffec6cb2c944601d3612221f49.png) ---
**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\ **Post date:** [July 22, 2020, 12:15pm UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/26 "2020-07-22T12:15:10Z")
Beautiful ---
**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\ **Post date:** [July 23, 2020, 2:15pm UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/27 "2020-07-23T14:15:24Z")
That’s amazing, Bob! Thanks also for sharing! ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [July 23, 2020, 4:28pm UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/28 "2020-07-23T16:28:08Z")
My pleasure! It’s my hope that one day Glide will build in a progress bar into the card/tile view itself, but this will do for now. Anything eCourses/lessons that have completion requirements would benefit from this feature for sure. ---
**Author:** ![Mr\_Watkin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mr_watkin/32/349_2.png) [@Mr\_Watkin](https://community.glideapps.com/u/Mr_Watkin)\ **Post date:** [July 25, 2020, 4:56pm UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/29 "2020-07-25T16:56:35Z")
WOW! Amazing. Hadn’t even considered this as a possibility, but this would be a GREAT feature for Glide to build into the card/tile view! ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [July 25, 2020, 5:10pm UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/30 "2020-07-25T17:10:06Z")
Yeah, I’ve been proposing it for a couple months now. ---
**Author:** ![bcv1960](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bcv1960/32/8408_2.png) [@bcv1960](https://community.glideapps.com/u/bcv1960)\ **Post date:** [July 26, 2020, 7:28pm UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/31 "2020-07-26T19:28:52Z")
More great stuff! Thanks for everything Bob! ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [December 15, 2020, 9:19am UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/32 "2020-12-15T09:19:10Z")
I was touching this again today so here’s an alternative using l\_fetch for anyone who needs it: ``` https://res.cloudinary.com/***/image/fetch/c_fill,w_901,h_600/l_fetch:aHR0cHM6Ly9kdW1teWltYWdlLmNvbS82MDB4NDAwLzAwNjQwMC8wMDY0MDA=,w_PERCENT,h_0.05,g_south_west,c_scale,fl_relative/l_fetch:aHR0cHM6Ly9kdW1teWltYWdlLmNvbS82MDB4NDAwL2ZmZmZmZi9mZmZmZmY=,w_REMAIN,h_0.05,g_south_east,c_scale,fl_relative/PIC ``` Variables: `***`: Account name PERCENT: Current progress % REMAIN: Remaining progress % PIC: The link to the pic ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/f/fffe49bd41a1712d870ee600c47f47e06d98aa0c.jpeg) ---
**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\ **Post date:** [May 20, 2021, 5:22am UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/33 "2021-05-20T05:22:57Z")
Is there a way to make it without image? ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [May 20, 2021, 8:11am UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/34 "2021-05-20T08:11:50Z")
On which layout do you want to show it? ---
**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\ **Post date:** [May 20, 2021, 8:52am UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/35 "2021-05-20T08:52:03Z")
The use case is that I want to show the progress of some achievements and its progresses (ordered by % of completion) for now I have the list and the calculus of each % and of course I can order them by that, but the progress bar component of Glide is in Details screen not for lists or inlinelists and I thought maybe to create tiles or cards with a progressbar in the image type from quickchart or cloudinary. ---
**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\ **Post date:** [May 20, 2021, 8:52am UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/36 "2021-05-20T08:52:28Z")
But I don’t have an image to display you know? I only want the progress bar. ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [May 20, 2021, 10:04am UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/37 "2021-05-20T10:04:32Z")
Only way to place a progress bar in an inlin list is if it’s the image (or avatar in tile/card view). Might be able to do something with CSS to make it appear differently. Here’s a quick example with quickcharts: ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/7/b7575e34f35c7a869d1dc534954541a793706a16.jpeg) ---
**Author:** ![adriasoce](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adriasoce/32/24153_2.png) [@adriasoce](https://community.glideapps.com/u/adriasoce)\ **Post date:** [May 20, 2021, 10:10am UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/38 "2021-05-20T10:10:15Z")
That works for me! How can I achieve this progress bar? ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [May 20, 2021, 10:30am UTC](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859/39 "2021-05-20T10:30:46Z")
> [@heart\_eyes Quickchart.io: the Cloudinary of Charts —on the fly charts!](https://community.glideapps.com/t/quickchart-io-the-cloudinary-of-charts-on-the-fly-charts/15946): > > GAME CHANGER! Stumbled upon this site today—a way to create on the fly charts using data from your Glide tables. Images render instantly and you can select one of 14 different charts, customize colors, styles etc all through URL parameters! The video below shows my first attempt to create a chart from scratch and implement it in Glide. Took me less than 5 minutes. End result: [Previous page](https://community.glideapps.com/t/more-cloudinary-magic-progress-bars/12859.md?page=1)