More Cloudinary Magic: progress bars!

Project Showcase
21

Square = the new round :slight_smile:

22

You just never stop to amaze me. When do you find the time to do it all?

23

Amazing. :clap::clap::clap:

24

Too kind, sir! Early mornings—late nights

911E222B-CA0C-4758-9DEE-A59C84C04F61.gif

4 Likes
25

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

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

4 Likes
26

Beautiful

27

That’s amazing, Bob! Thanks also for sharing!

2 Likes
28

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.

2 Likes
29

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!

30

Yeah, I’ve been proposing it for a couple months now.

31

More great stuff! Thanks for everything Bob!

1 Like
32

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
image303×610 40.6 KB

6 Likes
33

Is there a way to make it without image?

34

On which layout do you want to show it?

35

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.

36

But I don’t have an image to display you know? I only want the progress bar.

37

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

3 Likes
38

That works for me! How can I achieve this progress bar?

39
6 Likes