Generate a profile completeness meter
Generate a profile completeness meter
Presentation
Email marketing
Personalization
Advanced

Generate a great looking profile completeness meter to notify your users of their progress. Whether it's for profile page details, survey progress, or just to show your users the percentage of the completion of any task. Use Cloudinary's powerful manipulation tools to generate just what you need.

Let's go over the steps for generating a completeness meter. Here's a black bar image uploaded to Cloudinary: Black Bar

https://res.cloudinary.com/demo/image/upload/black_bar.png

We can use this black bar to generate any other rectangle images. We can change its color as well. Let's start by generating the center white bar, then adding a border: White bar

https://res.cloudinary.com/demo/image/upload/w_300,h_10,c_scale,e_colorize,co_white,bo_1px_solid_black/black_bar.png

Next step: adding the progress bar. We use the same 'black_bar' image and color it to blue to generate the progress bar. Set the flags parameter to relative (fl_relative in URLs) to make the image size fit your required dimensions. In this example, we need the height of the blue bar to fit to 100% of the white bar, but we need its width to fit the actual user's progress. For example, for 70% we can use the following: Blue bar

https://res.cloudinary.com/demo/image/upload/w_300,h_10,c_scale,e_colorize,co_white,bo_1px_solid_black/l_black_bar,w_0.7,h_1.0,c_scale,e_colorize,co_rgb:0D4190,fl_relative,g_west/black_bar.png

We add nice looking rounded corners, so: Rounded corners

https://res.cloudinary.com/demo/image/upload/w_300,h_10,c_scale,e_colorize,co_white,bo_1px_solid_black/l_black_bar,w_0.7,h_1.0,c_scale,e_colorize,co_rgb:0D4190,fl_relative,g_west/r_3/black_bar.png

We use the 'black_bar' image again to obtain a pleasing gray background. This is done with the underlay parameter (u in URLs): Grey background

https://res.cloudinary.com/demo/image/upload/w_300,h_10,c_scale,e_colorize,co_white,bo_1px_solid_black/l_black_bar,w_0.7,h_1.0,c_scale,e_colorize,co_rgb:0D4190,fl_relative,g_west/r_3/u_black_bar,w_400,h_100,c_scale,e_colorize,co_rgb:E9E8E8/black_bar.png

Now we can add some text and choose the desired font, color, size and position as explained in the recipe Add a text to an image: Added text

https://res.cloudinary.com/demo/image/upload/w_300,h_10,c_scale,e_colorize,co_white,bo_1px_solid_black/l_black_bar,w_0.7,h_1.0,c_scale,e_colorize,co_rgb:0D4190,fl_relative,g_west/r_3/u_black_bar,w_400,h_100,c_scale,e_colorize,co_rgb:E9E8E8/l_text:Audiowide_20:70%25,co_rgb:0D4190,y_-20/l_text:Audiowide_20:Profile completeness,co_rgb:0D4190,y_25/black_bar.png

You can add any image overlay, for example, a badge: Added a badge

https://res.cloudinary.com/demo/image/upload/w_300,h_10,c_scale,e_colorize,co_white,bo_1px_solid_black/l_black_bar,w_0.7,h_1.0,c_scale,e_colorize,co_rgb:0D4190,fl_relative,g_west/r_3/u_black_bar,w_400,h_100,c_scale,e_colorize,co_rgb:E9E8E8/l_text:Audiowide_20:70%25,co_rgb:0D4190,y_-20/l_text:Audiowide_20:Profile completeness,co_rgb:0D4190,y_25/l_badge,w_30,g_north_west,x_10,y_10/black_bar.png

And for a final touch - add rounded corners and a nice shadow: Badge meter

https://res.cloudinary.com/demo/image/upload/w_300,h_10,c_scale,e_colorize,co_white,bo_1px_solid_black/l_black_bar,w_0.7,h_1.0,c_scale,e_colorize,co_rgb:0D4190,fl_relative,g_west/r_3/u_black_bar,w_400,h_100,c_scale,e_colorize,co_rgb:E9E8E8/l_text:Audiowide_20:70%25,co_rgb:0D4190,y_-20/l_text:Audiowide_20:Profile completeness,co_rgb:0D4190,y_25/l_badge,w_30,g_north_west,x_10,y_10/r_20/e_shadow/black_bar.png

Here's another example, this time using an automatically fetched Facebook profile picture. It's placed in a custom position and cropped into a circle: User's thumbnail

https://res.cloudinary.com/demo/image/upload/w_300,h_40,c_scale,e_colorize,co_rgb:949494/l_black_bar,w_0.5,h_1.0,c_scale,e_colorize,co_rgb:0D4190,fl_relative,g_west/r_10/u_black_bar,w_400,h_100,c_scale,e_colorize,co_rgb:E9E8E8/l_text:Audiowide_20:50%25,co_white,o_70/l_facebook:billclinton.png,w_40,h_40,r_max,g_north_west,x_7,y_7/r_20/e_shadow/black_bar.png

Lastly, an avatar progress bar: Avatar meter

https://res.cloudinary.com/demo/image/upload/e_trim/e_colorize,co_white/b_rgb:D0CDCD/l_avatar,e_trim,w_1.0,h_0.6,c_crop,g_south/fl_layer_apply,g_south/l_text:Playball_40:60%25,co_white,y_80/w_200,c_scale/avatar.jpg