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:
cl_image_tag("black_bar.png")
cl_image_tag("black_bar.png")
CloudinaryImage("black_bar.png").image()
cloudinary.image("black_bar.png")
cloudinary.url().imageTag("black_bar.png");
cloudinary.imageTag('black_bar.png').toHtml();
$.cloudinary.image("black_bar.png")
<Image publicId="black_bar.png" > </Image>
<cl-image public-id="black_bar.png" > </cl-image>
cloudinary.Api.UrlImgUp.BuildImageTag("black_bar.png")
MediaManager.get().url().generate("black_bar.png");
imageView.cldSetImage(cloudinary.createUrl().generate("black_bar.png")!, cloudinary: cloudinary)

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:
cl_image_tag("black_bar.png", :width=>300, :height=>10, :effect=>"colorize", :color=>"white", :border=>"1px_solid_black", :crop=>"scale")
cl_image_tag("black_bar.png", array("width"=>300, "height"=>10, "effect"=>"colorize", "color"=>"white", "border"=>"1px_solid_black", "crop"=>"scale"))
CloudinaryImage("black_bar.png").image(width=300, height=10, effect="colorize", color="white", border="1px_solid_black", crop="scale")
cloudinary.image("black_bar.png", {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"})
cloudinary.url().transformation(new Transformation().width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale")).imageTag("black_bar.png");
cloudinary.imageTag('black_bar.png', {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}).toHtml();
$.cloudinary.image("black_bar.png", {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"})
<Image publicId="black_bar.png" > <Transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" /> </Image>
<cl-image public-id="black_bar.png" > <cl-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(10).Effect("colorize").Color("white").Border("1px_solid_black").Crop("scale")).BuildImageTag("black_bar.png")
MediaManager.get().url().transformation(new Transformation().width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale")).generate("black_bar.png");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(10).setEffect("colorize").setColor("white").setBorder("1px_solid_black").setCrop("scale")).generate("black_bar.png")!, cloudinary: cloudinary)

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:
cl_image_tag("black_bar.png", :transformation=>[ {:width=>300, :height=>10, :effect=>"colorize", :color=>"white", :border=>"1px_solid_black", :crop=>"scale"}, {:overlay=>"black_bar", :width=>0.7, :height=>1.0, :effect=>"colorize", :color=>"#0D4190", :flags=>"relative", :gravity=>"west", :crop=>"scale"} ])
cl_image_tag("black_bar.png", array("transformation"=>array( array("width"=>300, "height"=>10, "effect"=>"colorize", "color"=>"white", "border"=>"1px_solid_black", "crop"=>"scale"), array("overlay"=>"black_bar", "width"=>0.7, "height"=>1.0, "effect"=>"colorize", "color"=>"#0D4190", "flags"=>"relative", "gravity"=>"west", "crop"=>"scale") )))
CloudinaryImage("black_bar.png").image(transformation=[ {'width': 300, 'height': 10, 'effect': "colorize", 'color': "white", 'border': "1px_solid_black", 'crop': "scale"}, {'overlay': "black_bar", 'width': 0.7, 'height': 1.0, 'effect': "colorize", 'color': "#0D4190", 'flags': "relative", 'gravity': "west", 'crop': "scale"} ])
cloudinary.image("black_bar.png", {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: "black_bar", width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"} ]})
cloudinary.url().transformation(new Transformation() .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain() .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale")).imageTag("black_bar.png");
cloudinary.imageTag('black_bar.png', {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"} ]}).toHtml();
$.cloudinary.image("black_bar.png", {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"} ]})
<Image publicId="black_bar.png" > <Transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" /> <Transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" /> </Image>
<cl-image public-id="black_bar.png" > <cl-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale"> </cl-transformation> <cl-transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(300).Height(10).Effect("colorize").Color("white").Border("1px_solid_black").Crop("scale").Chain() .Overlay(new Layer().PublicId("black_bar")).Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale")).BuildImageTag("black_bar.png")
MediaManager.get().url().transformation(new Transformation() .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain() .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale")).generate("black_bar.png");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(300).setHeight(10).setEffect("colorize").setColor("white").setBorder("1px_solid_black").setCrop("scale").chain() .setOverlay("black_bar").setWidth(0.7).setHeight(1.0).setEffect("colorize").setColor("#0D4190").setFlags("relative").setGravity("west").setCrop("scale")).generate("black_bar.png")!, cloudinary: cloudinary)

We add nice looking rounded corners, so:
cl_image_tag("black_bar.png", :transformation=>[ {:width=>300, :height=>10, :effect=>"colorize", :color=>"white", :border=>"1px_solid_black", :crop=>"scale"}, {:overlay=>"black_bar", :width=>0.7, :height=>1.0, :effect=>"colorize", :color=>"#0D4190", :flags=>"relative", :gravity=>"west", :crop=>"scale"}, {:radius=>3} ])
cl_image_tag("black_bar.png", array("transformation"=>array( array("width"=>300, "height"=>10, "effect"=>"colorize", "color"=>"white", "border"=>"1px_solid_black", "crop"=>"scale"), array("overlay"=>"black_bar", "width"=>0.7, "height"=>1.0, "effect"=>"colorize", "color"=>"#0D4190", "flags"=>"relative", "gravity"=>"west", "crop"=>"scale"), array("radius"=>3) )))
CloudinaryImage("black_bar.png").image(transformation=[ {'width': 300, 'height': 10, 'effect': "colorize", 'color': "white", 'border': "1px_solid_black", 'crop': "scale"}, {'overlay': "black_bar", 'width': 0.7, 'height': 1.0, 'effect': "colorize", 'color': "#0D4190", 'flags': "relative", 'gravity': "west", 'crop': "scale"}, {'radius': 3} ])
cloudinary.image("black_bar.png", {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: "black_bar", width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 3} ]})
cloudinary.url().transformation(new Transformation() .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain() .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain() .radius(3)).imageTag("black_bar.png");
cloudinary.imageTag('black_bar.png', {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 3} ]}).toHtml();
$.cloudinary.image("black_bar.png", {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 3} ]})
<Image publicId="black_bar.png" > <Transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" /> <Transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" /> <Transformation radius="3" /> </Image>
<cl-image public-id="black_bar.png" > <cl-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale"> </cl-transformation> <cl-transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale"> </cl-transformation> <cl-transformation radius="3"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(300).Height(10).Effect("colorize").Color("white").Border("1px_solid_black").Crop("scale").Chain() .Overlay(new Layer().PublicId("black_bar")).Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain() .Radius(3)).BuildImageTag("black_bar.png")
MediaManager.get().url().transformation(new Transformation() .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain() .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain() .radius(3)).generate("black_bar.png");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(300).setHeight(10).setEffect("colorize").setColor("white").setBorder("1px_solid_black").setCrop("scale").chain() .setOverlay("black_bar").setWidth(0.7).setHeight(1.0).setEffect("colorize").setColor("#0D4190").setFlags("relative").setGravity("west").setCrop("scale").chain() .setRadius(3)).generate("black_bar.png")!, cloudinary: cloudinary)

We use the 'black_bar' image again to obtain a pleasing gray background. This is done with the underlay
parameter (u
in URLs):
cl_image_tag("black_bar.png", :transformation=>[ {:width=>300, :height=>10, :effect=>"colorize", :color=>"white", :border=>"1px_solid_black", :crop=>"scale"}, {:overlay=>"black_bar", :width=>0.7, :height=>1.0, :effect=>"colorize", :color=>"#0D4190", :flags=>"relative", :gravity=>"west", :crop=>"scale"}, {:radius=>3}, {:underlay=>"black_bar", :width=>400, :height=>100, :effect=>"colorize", :color=>"#E9E8E8", :crop=>"scale"} ])
cl_image_tag("black_bar.png", array("transformation"=>array( array("width"=>300, "height"=>10, "effect"=>"colorize", "color"=>"white", "border"=>"1px_solid_black", "crop"=>"scale"), array("overlay"=>"black_bar", "width"=>0.7, "height"=>1.0, "effect"=>"colorize", "color"=>"#0D4190", "flags"=>"relative", "gravity"=>"west", "crop"=>"scale"), array("radius"=>3), array("underlay"=>"black_bar", "width"=>400, "height"=>100, "effect"=>"colorize", "color"=>"#E9E8E8", "crop"=>"scale") )))
CloudinaryImage("black_bar.png").image(transformation=[ {'width': 300, 'height': 10, 'effect': "colorize", 'color': "white", 'border': "1px_solid_black", 'crop': "scale"}, {'overlay': "black_bar", 'width': 0.7, 'height': 1.0, 'effect': "colorize", 'color': "#0D4190", 'flags': "relative", 'gravity': "west", 'crop': "scale"}, {'radius': 3}, {'underlay': "black_bar", 'width': 400, 'height': 100, 'effect': "colorize", 'color': "#E9E8E8", 'crop': "scale"} ])
cloudinary.image("black_bar.png", {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: "black_bar", width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 3}, {underlay: "black_bar", width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"} ]})
cloudinary.url().transformation(new Transformation() .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain() .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain() .radius(3).chain() .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale")).imageTag("black_bar.png");
cloudinary.imageTag('black_bar.png', {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 3}, {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"} ]}).toHtml();
$.cloudinary.image("black_bar.png", {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 3}, {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"} ]})
<Image publicId="black_bar.png" > <Transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" /> <Transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" /> <Transformation radius="3" /> <Transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" /> </Image>
<cl-image public-id="black_bar.png" > <cl-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale"> </cl-transformation> <cl-transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale"> </cl-transformation> <cl-transformation radius="3"> </cl-transformation> <cl-transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(300).Height(10).Effect("colorize").Color("white").Border("1px_solid_black").Crop("scale").Chain() .Overlay(new Layer().PublicId("black_bar")).Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain() .Radius(3).Chain() .Underlay(new Layer().PublicId("black_bar")).Width(400).Height(100).Effect("colorize").Color("#E9E8E8").Crop("scale")).BuildImageTag("black_bar.png")
MediaManager.get().url().transformation(new Transformation() .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain() .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain() .radius(3).chain() .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale")).generate("black_bar.png");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(300).setHeight(10).setEffect("colorize").setColor("white").setBorder("1px_solid_black").setCrop("scale").chain() .setOverlay("black_bar").setWidth(0.7).setHeight(1.0).setEffect("colorize").setColor("#0D4190").setFlags("relative").setGravity("west").setCrop("scale").chain() .setRadius(3).chain() .setUnderlay("black_bar").setWidth(400).setHeight(100).setEffect("colorize").setColor("#E9E8E8").setCrop("scale")).generate("black_bar.png")!, cloudinary: cloudinary)

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:
cl_image_tag("black_bar.png", :transformation=>[ {:width=>300, :height=>10, :effect=>"colorize", :color=>"white", :border=>"1px_solid_black", :crop=>"scale"}, {:overlay=>"black_bar", :width=>0.7, :height=>1.0, :effect=>"colorize", :color=>"#0D4190", :flags=>"relative", :gravity=>"west", :crop=>"scale"}, {:radius=>3}, {:underlay=>"black_bar", :width=>400, :height=>100, :effect=>"colorize", :color=>"#E9E8E8", :crop=>"scale"}, {:overlay=>{:font_family=>"Audiowide", :font_size=>20, :text=>"70%2525"}, :color=>"#0D4190", :y=>-20}, {:overlay=>{:font_family=>"Audiowide", :font_size=>20, :text=>"Profile%20completeness"}, :color=>"#0D4190", :y=>25} ])
cl_image_tag("black_bar.png", array("transformation"=>array( array("width"=>300, "height"=>10, "effect"=>"colorize", "color"=>"white", "border"=>"1px_solid_black", "crop"=>"scale"), array("overlay"=>"black_bar", "width"=>0.7, "height"=>1.0, "effect"=>"colorize", "color"=>"#0D4190", "flags"=>"relative", "gravity"=>"west", "crop"=>"scale"), array("radius"=>3), array("underlay"=>"black_bar", "width"=>400, "height"=>100, "effect"=>"colorize", "color"=>"#E9E8E8", "crop"=>"scale"), array("overlay"=>array("font_family"=>"Audiowide", "font_size"=>20, "text"=>"70%2525"), "color"=>"#0D4190", "y"=>-20), array("overlay"=>array("font_family"=>"Audiowide", "font_size"=>20, "text"=>"Profile%20completeness"), "color"=>"#0D4190", "y"=>25) )))
CloudinaryImage("black_bar.png").image(transformation=[ {'width': 300, 'height': 10, 'effect': "colorize", 'color': "white", 'border': "1px_solid_black", 'crop': "scale"}, {'overlay': "black_bar", 'width': 0.7, 'height': 1.0, 'effect': "colorize", 'color': "#0D4190", 'flags': "relative", 'gravity': "west", 'crop': "scale"}, {'radius': 3}, {'underlay': "black_bar", 'width': 400, 'height': 100, 'effect': "colorize", 'color': "#E9E8E8", 'crop': "scale"}, {'overlay': {'font_family': "Audiowide", 'font_size': 20, 'text': "70%2525"}, 'color': "#0D4190", 'y': -20}, {'overlay': {'font_family': "Audiowide", 'font_size': 20, 'text': "Profile%20completeness"}, 'color': "#0D4190", 'y': 25} ])
cloudinary.image("black_bar.png", {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: "black_bar", width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 3}, {underlay: "black_bar", width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"}, {overlay: {font_family: "Audiowide", font_size: 20, text: "70%2525"}, color: "#0D4190", y: -20}, {overlay: {font_family: "Audiowide", font_size: 20, text: "Profile%20completeness"}, color: "#0D4190", y: 25} ]})
cloudinary.url().transformation(new Transformation() .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain() .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain() .radius(3).chain() .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain() .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525")).color("#0D4190").y(-20).chain() .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness")).color("#0D4190").y(25)).imageTag("black_bar.png");
cloudinary.imageTag('black_bar.png', {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 3}, {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525"), color: "#0D4190", y: -20}, {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness"), color: "#0D4190", y: 25} ]}).toHtml();
$.cloudinary.image("black_bar.png", {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 3}, {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525"), color: "#0D4190", y: -20}, {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness"), color: "#0D4190", y: 25} ]})
<Image publicId="black_bar.png" > <Transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" /> <Transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" /> <Transformation radius="3" /> <Transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" /> <Transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "70%2525"}} color="#0D4190" y="-20" /> <Transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "Profile%20completeness"}} color="#0D4190" y="25" /> </Image>
<cl-image public-id="black_bar.png" > <cl-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale"> </cl-transformation> <cl-transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale"> </cl-transformation> <cl-transformation radius="3"> </cl-transformation> <cl-transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale"> </cl-transformation> <cl-transformation overlay="text:Audiowide_20:70%2525" color="#0D4190" y="-20"> </cl-transformation> <cl-transformation overlay="text:Audiowide_20:Profile%20completeness" color="#0D4190" y="25"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(300).Height(10).Effect("colorize").Color("white").Border("1px_solid_black").Crop("scale").Chain() .Overlay(new Layer().PublicId("black_bar")).Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain() .Radius(3).Chain() .Underlay(new Layer().PublicId("black_bar")).Width(400).Height(100).Effect("colorize").Color("#E9E8E8").Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("Audiowide").FontSize(20).Text("70%2525")).Color("#0D4190").Y(-20).Chain() .Overlay(new TextLayer().FontFamily("Audiowide").FontSize(20).Text("Profile%20completeness")).Color("#0D4190").Y(25)).BuildImageTag("black_bar.png")
MediaManager.get().url().transformation(new Transformation() .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain() .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain() .radius(3).chain() .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain() .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525")).color("#0D4190").y(-20).chain() .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness")).color("#0D4190").y(25)).generate("black_bar.png");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(300).setHeight(10).setEffect("colorize").setColor("white").setBorder("1px_solid_black").setCrop("scale").chain() .setOverlay("black_bar").setWidth(0.7).setHeight(1.0).setEffect("colorize").setColor("#0D4190").setFlags("relative").setGravity("west").setCrop("scale").chain() .setRadius(3).chain() .setUnderlay("black_bar").setWidth(400).setHeight(100).setEffect("colorize").setColor("#E9E8E8").setCrop("scale").chain() .setOverlay("text:Audiowide_20:70%2525").setColor("#0D4190").setY(-20).chain() .setOverlay("text:Audiowide_20:Profile%20completeness").setColor("#0D4190").setY(25)).generate("black_bar.png")!, cloudinary: cloudinary)

You can add any image overlay, for example, a badge:
cl_image_tag("black_bar.png", :transformation=>[ {:width=>300, :height=>10, :effect=>"colorize", :color=>"white", :border=>"1px_solid_black", :crop=>"scale"}, {:overlay=>"black_bar", :width=>0.7, :height=>1.0, :effect=>"colorize", :color=>"#0D4190", :flags=>"relative", :gravity=>"west", :crop=>"scale"}, {:radius=>3}, {:underlay=>"black_bar", :width=>400, :height=>100, :effect=>"colorize", :color=>"#E9E8E8", :crop=>"scale"}, {:overlay=>{:font_family=>"Audiowide", :font_size=>20, :text=>"70%2525"}, :color=>"#0D4190", :y=>-20}, {:overlay=>{:font_family=>"Audiowide", :font_size=>20, :text=>"Profile%20completeness"}, :color=>"#0D4190", :y=>25}, {:overlay=>"badge", :width=>30, :gravity=>"north_west", :x=>10, :y=>10} ])
cl_image_tag("black_bar.png", array("transformation"=>array( array("width"=>300, "height"=>10, "effect"=>"colorize", "color"=>"white", "border"=>"1px_solid_black", "crop"=>"scale"), array("overlay"=>"black_bar", "width"=>0.7, "height"=>1.0, "effect"=>"colorize", "color"=>"#0D4190", "flags"=>"relative", "gravity"=>"west", "crop"=>"scale"), array("radius"=>3), array("underlay"=>"black_bar", "width"=>400, "height"=>100, "effect"=>"colorize", "color"=>"#E9E8E8", "crop"=>"scale"), array("overlay"=>array("font_family"=>"Audiowide", "font_size"=>20, "text"=>"70%2525"), "color"=>"#0D4190", "y"=>-20), array("overlay"=>array("font_family"=>"Audiowide", "font_size"=>20, "text"=>"Profile%20completeness"), "color"=>"#0D4190", "y"=>25), array("overlay"=>"badge", "width"=>30, "gravity"=>"north_west", "x"=>10, "y"=>10) )))
CloudinaryImage("black_bar.png").image(transformation=[ {'width': 300, 'height': 10, 'effect': "colorize", 'color': "white", 'border': "1px_solid_black", 'crop': "scale"}, {'overlay': "black_bar", 'width': 0.7, 'height': 1.0, 'effect': "colorize", 'color': "#0D4190", 'flags': "relative", 'gravity': "west", 'crop': "scale"}, {'radius': 3}, {'underlay': "black_bar", 'width': 400, 'height': 100, 'effect': "colorize", 'color': "#E9E8E8", 'crop': "scale"}, {'overlay': {'font_family': "Audiowide", 'font_size': 20, 'text': "70%2525"}, 'color': "#0D4190", 'y': -20}, {'overlay': {'font_family': "Audiowide", 'font_size': 20, 'text': "Profile%20completeness"}, 'color': "#0D4190", 'y': 25}, {'overlay': "badge", 'width': 30, 'gravity': "north_west", 'x': 10, 'y': 10} ])
cloudinary.image("black_bar.png", {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: "black_bar", width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 3}, {underlay: "black_bar", width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"}, {overlay: {font_family: "Audiowide", font_size: 20, text: "70%2525"}, color: "#0D4190", y: -20}, {overlay: {font_family: "Audiowide", font_size: 20, text: "Profile%20completeness"}, color: "#0D4190", y: 25}, {overlay: "badge", width: 30, gravity: "north_west", x: 10, y: 10} ]})
cloudinary.url().transformation(new Transformation() .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain() .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain() .radius(3).chain() .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain() .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525")).color("#0D4190").y(-20).chain() .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness")).color("#0D4190").y(25).chain() .overlay(new Layer().publicId("badge")).width(30).gravity("north_west").x(10).y(10)).imageTag("black_bar.png");
cloudinary.imageTag('black_bar.png', {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 3}, {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525"), color: "#0D4190", y: -20}, {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness"), color: "#0D4190", y: 25}, {overlay: new cloudinary.Layer().publicId("badge"), width: 30, gravity: "north_west", x: 10, y: 10} ]}).toHtml();
$.cloudinary.image("black_bar.png", {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 3}, {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525"), color: "#0D4190", y: -20}, {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness"), color: "#0D4190", y: 25}, {overlay: new cloudinary.Layer().publicId("badge"), width: 30, gravity: "north_west", x: 10, y: 10} ]})
<Image publicId="black_bar.png" > <Transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" /> <Transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" /> <Transformation radius="3" /> <Transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" /> <Transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "70%2525"}} color="#0D4190" y="-20" /> <Transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "Profile%20completeness"}} color="#0D4190" y="25" /> <Transformation overlay="badge" width="30" gravity="north_west" x="10" y="10" /> </Image>
<cl-image public-id="black_bar.png" > <cl-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale"> </cl-transformation> <cl-transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale"> </cl-transformation> <cl-transformation radius="3"> </cl-transformation> <cl-transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale"> </cl-transformation> <cl-transformation overlay="text:Audiowide_20:70%2525" color="#0D4190" y="-20"> </cl-transformation> <cl-transformation overlay="text:Audiowide_20:Profile%20completeness" color="#0D4190" y="25"> </cl-transformation> <cl-transformation overlay="badge" width="30" gravity="north_west" x="10" y="10"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(300).Height(10).Effect("colorize").Color("white").Border("1px_solid_black").Crop("scale").Chain() .Overlay(new Layer().PublicId("black_bar")).Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain() .Radius(3).Chain() .Underlay(new Layer().PublicId("black_bar")).Width(400).Height(100).Effect("colorize").Color("#E9E8E8").Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("Audiowide").FontSize(20).Text("70%2525")).Color("#0D4190").Y(-20).Chain() .Overlay(new TextLayer().FontFamily("Audiowide").FontSize(20).Text("Profile%20completeness")).Color("#0D4190").Y(25).Chain() .Overlay(new Layer().PublicId("badge")).Width(30).Gravity("north_west").X(10).Y(10)).BuildImageTag("black_bar.png")
MediaManager.get().url().transformation(new Transformation() .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain() .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain() .radius(3).chain() .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain() .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525")).color("#0D4190").y(-20).chain() .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness")).color("#0D4190").y(25).chain() .overlay(new Layer().publicId("badge")).width(30).gravity("north_west").x(10).y(10)).generate("black_bar.png");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(300).setHeight(10).setEffect("colorize").setColor("white").setBorder("1px_solid_black").setCrop("scale").chain() .setOverlay("black_bar").setWidth(0.7).setHeight(1.0).setEffect("colorize").setColor("#0D4190").setFlags("relative").setGravity("west").setCrop("scale").chain() .setRadius(3).chain() .setUnderlay("black_bar").setWidth(400).setHeight(100).setEffect("colorize").setColor("#E9E8E8").setCrop("scale").chain() .setOverlay("text:Audiowide_20:70%2525").setColor("#0D4190").setY(-20).chain() .setOverlay("text:Audiowide_20:Profile%20completeness").setColor("#0D4190").setY(25).chain() .setOverlay("badge").setWidth(30).setGravity("north_west").setX(10).setY(10)).generate("black_bar.png")!, cloudinary: cloudinary)

And for a final touch - add rounded corners and a nice shadow:
cl_image_tag("black_bar.png", :transformation=>[ {:width=>300, :height=>10, :effect=>"colorize", :color=>"white", :border=>"1px_solid_black", :crop=>"scale"}, {:overlay=>"black_bar", :width=>0.7, :height=>1.0, :effect=>"colorize", :color=>"#0D4190", :flags=>"relative", :gravity=>"west", :crop=>"scale"}, {:radius=>3}, {:underlay=>"black_bar", :width=>400, :height=>100, :effect=>"colorize", :color=>"#E9E8E8", :crop=>"scale"}, {:overlay=>{:font_family=>"Audiowide", :font_size=>20, :text=>"70%2525"}, :color=>"#0D4190", :y=>-20}, {:overlay=>{:font_family=>"Audiowide", :font_size=>20, :text=>"Profile%20completeness"}, :color=>"#0D4190", :y=>25}, {:overlay=>"badge", :width=>30, :gravity=>"north_west", :x=>10, :y=>10}, {:radius=>20}, {:effect=>"shadow"} ])
cl_image_tag("black_bar.png", array("transformation"=>array( array("width"=>300, "height"=>10, "effect"=>"colorize", "color"=>"white", "border"=>"1px_solid_black", "crop"=>"scale"), array("overlay"=>"black_bar", "width"=>0.7, "height"=>1.0, "effect"=>"colorize", "color"=>"#0D4190", "flags"=>"relative", "gravity"=>"west", "crop"=>"scale"), array("radius"=>3), array("underlay"=>"black_bar", "width"=>400, "height"=>100, "effect"=>"colorize", "color"=>"#E9E8E8", "crop"=>"scale"), array("overlay"=>array("font_family"=>"Audiowide", "font_size"=>20, "text"=>"70%2525"), "color"=>"#0D4190", "y"=>-20), array("overlay"=>array("font_family"=>"Audiowide", "font_size"=>20, "text"=>"Profile%20completeness"), "color"=>"#0D4190", "y"=>25), array("overlay"=>"badge", "width"=>30, "gravity"=>"north_west", "x"=>10, "y"=>10), array("radius"=>20), array("effect"=>"shadow") )))
CloudinaryImage("black_bar.png").image(transformation=[ {'width': 300, 'height': 10, 'effect': "colorize", 'color': "white", 'border': "1px_solid_black", 'crop': "scale"}, {'overlay': "black_bar", 'width': 0.7, 'height': 1.0, 'effect': "colorize", 'color': "#0D4190", 'flags': "relative", 'gravity': "west", 'crop': "scale"}, {'radius': 3}, {'underlay': "black_bar", 'width': 400, 'height': 100, 'effect': "colorize", 'color': "#E9E8E8", 'crop': "scale"}, {'overlay': {'font_family': "Audiowide", 'font_size': 20, 'text': "70%2525"}, 'color': "#0D4190", 'y': -20}, {'overlay': {'font_family': "Audiowide", 'font_size': 20, 'text': "Profile%20completeness"}, 'color': "#0D4190", 'y': 25}, {'overlay': "badge", 'width': 30, 'gravity': "north_west", 'x': 10, 'y': 10}, {'radius': 20}, {'effect': "shadow"} ])
cloudinary.image("black_bar.png", {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: "black_bar", width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 3}, {underlay: "black_bar", width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"}, {overlay: {font_family: "Audiowide", font_size: 20, text: "70%2525"}, color: "#0D4190", y: -20}, {overlay: {font_family: "Audiowide", font_size: 20, text: "Profile%20completeness"}, color: "#0D4190", y: 25}, {overlay: "badge", width: 30, gravity: "north_west", x: 10, y: 10}, {radius: 20}, {effect: "shadow"} ]})
cloudinary.url().transformation(new Transformation() .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain() .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain() .radius(3).chain() .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain() .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525")).color("#0D4190").y(-20).chain() .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness")).color("#0D4190").y(25).chain() .overlay(new Layer().publicId("badge")).width(30).gravity("north_west").x(10).y(10).chain() .radius(20).chain() .effect("shadow")).imageTag("black_bar.png");
cloudinary.imageTag('black_bar.png', {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 3}, {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525"), color: "#0D4190", y: -20}, {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness"), color: "#0D4190", y: 25}, {overlay: new cloudinary.Layer().publicId("badge"), width: 30, gravity: "north_west", x: 10, y: 10}, {radius: 20}, {effect: "shadow"} ]}).toHtml();
$.cloudinary.image("black_bar.png", {transformation: [ {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 3}, {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525"), color: "#0D4190", y: -20}, {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness"), color: "#0D4190", y: 25}, {overlay: new cloudinary.Layer().publicId("badge"), width: 30, gravity: "north_west", x: 10, y: 10}, {radius: 20}, {effect: "shadow"} ]})
<Image publicId="black_bar.png" > <Transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" /> <Transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" /> <Transformation radius="3" /> <Transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" /> <Transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "70%2525"}} color="#0D4190" y="-20" /> <Transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "Profile%20completeness"}} color="#0D4190" y="25" /> <Transformation overlay="badge" width="30" gravity="north_west" x="10" y="10" /> <Transformation radius="20" /> <Transformation effect="shadow" /> </Image>
<cl-image public-id="black_bar.png" > <cl-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale"> </cl-transformation> <cl-transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale"> </cl-transformation> <cl-transformation radius="3"> </cl-transformation> <cl-transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale"> </cl-transformation> <cl-transformation overlay="text:Audiowide_20:70%2525" color="#0D4190" y="-20"> </cl-transformation> <cl-transformation overlay="text:Audiowide_20:Profile%20completeness" color="#0D4190" y="25"> </cl-transformation> <cl-transformation overlay="badge" width="30" gravity="north_west" x="10" y="10"> </cl-transformation> <cl-transformation radius="20"> </cl-transformation> <cl-transformation effect="shadow"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(300).Height(10).Effect("colorize").Color("white").Border("1px_solid_black").Crop("scale").Chain() .Overlay(new Layer().PublicId("black_bar")).Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain() .Radius(3).Chain() .Underlay(new Layer().PublicId("black_bar")).Width(400).Height(100).Effect("colorize").Color("#E9E8E8").Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("Audiowide").FontSize(20).Text("70%2525")).Color("#0D4190").Y(-20).Chain() .Overlay(new TextLayer().FontFamily("Audiowide").FontSize(20).Text("Profile%20completeness")).Color("#0D4190").Y(25).Chain() .Overlay(new Layer().PublicId("badge")).Width(30).Gravity("north_west").X(10).Y(10).Chain() .Radius(20).Chain() .Effect("shadow")).BuildImageTag("black_bar.png")
MediaManager.get().url().transformation(new Transformation() .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain() .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain() .radius(3).chain() .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain() .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525")).color("#0D4190").y(-20).chain() .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness")).color("#0D4190").y(25).chain() .overlay(new Layer().publicId("badge")).width(30).gravity("north_west").x(10).y(10).chain() .radius(20).chain() .effect("shadow")).generate("black_bar.png");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(300).setHeight(10).setEffect("colorize").setColor("white").setBorder("1px_solid_black").setCrop("scale").chain() .setOverlay("black_bar").setWidth(0.7).setHeight(1.0).setEffect("colorize").setColor("#0D4190").setFlags("relative").setGravity("west").setCrop("scale").chain() .setRadius(3).chain() .setUnderlay("black_bar").setWidth(400).setHeight(100).setEffect("colorize").setColor("#E9E8E8").setCrop("scale").chain() .setOverlay("text:Audiowide_20:70%2525").setColor("#0D4190").setY(-20).chain() .setOverlay("text:Audiowide_20:Profile%20completeness").setColor("#0D4190").setY(25).chain() .setOverlay("badge").setWidth(30).setGravity("north_west").setX(10).setY(10).chain() .setRadius(20).chain() .setEffect("shadow")).generate("black_bar.png")!, cloudinary: cloudinary)

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:
cl_image_tag("black_bar.png", :transformation=>[ {:width=>300, :height=>40, :effect=>"colorize", :color=>"#949494", :crop=>"scale"}, {:overlay=>"black_bar", :width=>0.5, :height=>1.0, :effect=>"colorize", :color=>"#0D4190", :flags=>"relative", :gravity=>"west", :crop=>"scale"}, {:radius=>10}, {:underlay=>"black_bar", :width=>400, :height=>100, :effect=>"colorize", :color=>"#E9E8E8", :crop=>"scale"}, {:overlay=>{:font_family=>"Audiowide", :font_size=>20, :text=>"50%2525"}, :color=>"white", :opacity=>70}, {:overlay=>"facebook:billclinton.png", :width=>40, :height=>40, :radius=>"max", :gravity=>"north_west", :x=>7, :y=>7}, {:radius=>20}, {:effect=>"shadow"} ])
cl_image_tag("black_bar.png", array("transformation"=>array( array("width"=>300, "height"=>40, "effect"=>"colorize", "color"=>"#949494", "crop"=>"scale"), array("overlay"=>"black_bar", "width"=>0.5, "height"=>1.0, "effect"=>"colorize", "color"=>"#0D4190", "flags"=>"relative", "gravity"=>"west", "crop"=>"scale"), array("radius"=>10), array("underlay"=>"black_bar", "width"=>400, "height"=>100, "effect"=>"colorize", "color"=>"#E9E8E8", "crop"=>"scale"), array("overlay"=>array("font_family"=>"Audiowide", "font_size"=>20, "text"=>"50%2525"), "color"=>"white", "opacity"=>70), array("overlay"=>"facebook:billclinton.png", "width"=>40, "height"=>40, "radius"=>"max", "gravity"=>"north_west", "x"=>7, "y"=>7), array("radius"=>20), array("effect"=>"shadow") )))
CloudinaryImage("black_bar.png").image(transformation=[ {'width': 300, 'height': 40, 'effect': "colorize", 'color': "#949494", 'crop': "scale"}, {'overlay': "black_bar", 'width': 0.5, 'height': 1.0, 'effect': "colorize", 'color': "#0D4190", 'flags': "relative", 'gravity': "west", 'crop': "scale"}, {'radius': 10}, {'underlay': "black_bar", 'width': 400, 'height': 100, 'effect': "colorize", 'color': "#E9E8E8", 'crop': "scale"}, {'overlay': {'font_family': "Audiowide", 'font_size': 20, 'text': "50%2525"}, 'color': "white", 'opacity': 70}, {'overlay': "facebook:billclinton.png", 'width': 40, 'height': 40, 'radius': "max", 'gravity': "north_west", 'x': 7, 'y': 7}, {'radius': 20}, {'effect': "shadow"} ])
cloudinary.image("black_bar.png", {transformation: [ {width: 300, height: 40, effect: "colorize", color: "#949494", crop: "scale"}, {overlay: "black_bar", width: "0.5", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 10}, {underlay: "black_bar", width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"}, {overlay: {font_family: "Audiowide", font_size: 20, text: "50%2525"}, color: "white", opacity: 70}, {overlay: "facebook:billclinton.png", width: 40, height: 40, radius: "max", gravity: "north_west", x: 7, y: 7}, {radius: 20}, {effect: "shadow"} ]})
cloudinary.url().transformation(new Transformation() .width(300).height(40).effect("colorize").color("#949494").crop("scale").chain() .overlay(new Layer().publicId("black_bar")).width(0.5).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain() .radius(10).chain() .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain() .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("50%2525")).color("white").opacity(70).chain() .overlay(new Layer().publicId("facebook:billclinton.png")).width(40).height(40).radius("max").gravity("north_west").x(7).y(7).chain() .radius(20).chain() .effect("shadow")).imageTag("black_bar.png");
cloudinary.imageTag('black_bar.png', {transformation: [ {width: 300, height: 40, effect: "colorize", color: "#949494", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.5", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 10}, {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("50%2525"), color: "white", opacity: 70}, {overlay: new cloudinary.Layer().publicId("facebook:billclinton.png"), width: 40, height: 40, radius: "max", gravity: "north_west", x: 7, y: 7}, {radius: 20}, {effect: "shadow"} ]}).toHtml();
$.cloudinary.image("black_bar.png", {transformation: [ {width: 300, height: 40, effect: "colorize", color: "#949494", crop: "scale"}, {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.5", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}, {radius: 10}, {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"}, {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("50%2525"), color: "white", opacity: 70}, {overlay: new cloudinary.Layer().publicId("facebook:billclinton.png"), width: 40, height: 40, radius: "max", gravity: "north_west", x: 7, y: 7}, {radius: 20}, {effect: "shadow"} ]})
<Image publicId="black_bar.png" > <Transformation width="300" height="40" effect="colorize" color="#949494" crop="scale" /> <Transformation overlay="black_bar" width="0.5" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" /> <Transformation radius="10" /> <Transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" /> <Transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "50%2525"}} color="white" opacity="70" /> <Transformation overlay="facebook:billclinton.png" width="40" height="40" radius="max" gravity="north_west" x="7" y="7" /> <Transformation radius="20" /> <Transformation effect="shadow" /> </Image>
<cl-image public-id="black_bar.png" > <cl-transformation width="300" height="40" effect="colorize" color="#949494" crop="scale"> </cl-transformation> <cl-transformation overlay="black_bar" width="0.5" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale"> </cl-transformation> <cl-transformation radius="10"> </cl-transformation> <cl-transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale"> </cl-transformation> <cl-transformation overlay="text:Audiowide_20:50%2525" color="white" opacity="70"> </cl-transformation> <cl-transformation overlay="facebook:billclinton.png" width="40" height="40" radius="max" gravity="north_west" x="7" y="7"> </cl-transformation> <cl-transformation radius="20"> </cl-transformation> <cl-transformation effect="shadow"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Width(300).Height(40).Effect("colorize").Color("#949494").Crop("scale").Chain() .Overlay(new Layer().PublicId("black_bar")).Width(0.5).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain() .Radius(10).Chain() .Underlay(new Layer().PublicId("black_bar")).Width(400).Height(100).Effect("colorize").Color("#E9E8E8").Crop("scale").Chain() .Overlay(new TextLayer().FontFamily("Audiowide").FontSize(20).Text("50%2525")).Color("white").Opacity(70).Chain() .Overlay(new Layer().PublicId("facebook:billclinton.png")).Width(40).Height(40).Radius("max").Gravity("north_west").X(7).Y(7).Chain() .Radius(20).Chain() .Effect("shadow")).BuildImageTag("black_bar.png")
MediaManager.get().url().transformation(new Transformation() .width(300).height(40).effect("colorize").color("#949494").crop("scale").chain() .overlay(new Layer().publicId("black_bar")).width(0.5).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain() .radius(10).chain() .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain() .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("50%2525")).color("white").opacity(70).chain() .overlay(new Layer().publicId("facebook:billclinton.png")).width(40).height(40).radius("max").gravity("north_west").x(7).y(7).chain() .radius(20).chain() .effect("shadow")).generate("black_bar.png");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setWidth(300).setHeight(40).setEffect("colorize").setColor("#949494").setCrop("scale").chain() .setOverlay("black_bar").setWidth(0.5).setHeight(1.0).setEffect("colorize").setColor("#0D4190").setFlags("relative").setGravity("west").setCrop("scale").chain() .setRadius(10).chain() .setUnderlay("black_bar").setWidth(400).setHeight(100).setEffect("colorize").setColor("#E9E8E8").setCrop("scale").chain() .setOverlay("text:Audiowide_20:50%2525").setColor("white").setOpacity(70).chain() .setOverlay("facebook:billclinton.png").setWidth(40).setHeight(40).setRadius("max").setGravity("north_west").setX(7).setY(7).chain() .setRadius(20).chain() .setEffect("shadow")).generate("black_bar.png")!, cloudinary: cloudinary)

Lastly, an avatar progress bar:
cl_image_tag("avatar.jpg", :transformation=>[ {:effect=>"trim"}, {:effect=>"colorize", :color=>"white"}, {:background=>"#D0CDCD"}, {:overlay=>"avatar", :effect=>"trim", :width=>1.0, :height=>0.6, :gravity=>"south", :crop=>"crop"}, {:flags=>"layer_apply", :gravity=>"south"}, {:overlay=>{:font_family=>"Playball", :font_size=>40, :text=>"60%2525"}, :color=>"white", :y=>80}, {:width=>200, :crop=>"scale"} ])
cl_image_tag("avatar.jpg", array("transformation"=>array( array("effect"=>"trim"), array("effect"=>"colorize", "color"=>"white"), array("background"=>"#D0CDCD"), array("overlay"=>"avatar", "effect"=>"trim", "width"=>1.0, "height"=>0.6, "gravity"=>"south", "crop"=>"crop"), array("flags"=>"layer_apply", "gravity"=>"south"), array("overlay"=>array("font_family"=>"Playball", "font_size"=>40, "text"=>"60%2525"), "color"=>"white", "y"=>80), array("width"=>200, "crop"=>"scale") )))
CloudinaryImage("avatar.jpg").image(transformation=[ {'effect': "trim"}, {'effect': "colorize", 'color': "white"}, {'background': "#D0CDCD"}, {'overlay': "avatar", 'effect': "trim", 'width': 1.0, 'height': 0.6, 'gravity': "south", 'crop': "crop"}, {'flags': "layer_apply", 'gravity': "south"}, {'overlay': {'font_family': "Playball", 'font_size': 40, 'text': "60%2525"}, 'color': "white", 'y': 80}, {'width': 200, 'crop': "scale"} ])
cloudinary.image("avatar.jpg", {transformation: [ {effect: "trim"}, {effect: "colorize", color: "white"}, {background: "#D0CDCD"}, {overlay: "avatar", effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"}, {flags: "layer_apply", gravity: "south"}, {overlay: {font_family: "Playball", font_size: 40, text: "60%2525"}, color: "white", y: 80}, {width: 200, crop: "scale"} ]})
cloudinary.url().transformation(new Transformation() .effect("trim").chain() .effect("colorize").color("white").chain() .background("#D0CDCD").chain() .overlay(new Layer().publicId("avatar")).effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain() .flags("layer_apply").gravity("south").chain() .overlay(new TextLayer().fontFamily("Playball").fontSize(40).text("60%2525")).color("white").y(80).chain() .width(200).crop("scale")).imageTag("avatar.jpg");
cloudinary.imageTag('avatar.jpg', {transformation: [ {effect: "trim"}, {effect: "colorize", color: "white"}, {background: "#D0CDCD"}, {overlay: new cloudinary.Layer().publicId("avatar"), effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"}, {flags: "layer_apply", gravity: "south"}, {overlay: new cloudinary.TextLayer().fontFamily("Playball").fontSize(40).text("60%2525"), color: "white", y: 80}, {width: 200, crop: "scale"} ]}).toHtml();
$.cloudinary.image("avatar.jpg", {transformation: [ {effect: "trim"}, {effect: "colorize", color: "white"}, {background: "#D0CDCD"}, {overlay: new cloudinary.Layer().publicId("avatar"), effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"}, {flags: "layer_apply", gravity: "south"}, {overlay: new cloudinary.TextLayer().fontFamily("Playball").fontSize(40).text("60%2525"), color: "white", y: 80}, {width: 200, crop: "scale"} ]})
<Image publicId="avatar.jpg" > <Transformation effect="trim" /> <Transformation effect="colorize" color="white" /> <Transformation background="#D0CDCD" /> <Transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop" /> <Transformation flags="layer_apply" gravity="south" /> <Transformation overlay={{fontFamily: "Playball", fontSize: 40, text: "60%2525"}} color="white" y="80" /> <Transformation width="200" crop="scale" /> </Image>
<cl-image public-id="avatar.jpg" > <cl-transformation effect="trim"> </cl-transformation> <cl-transformation effect="colorize" color="white"> </cl-transformation> <cl-transformation background="#D0CDCD"> </cl-transformation> <cl-transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop"> </cl-transformation> <cl-transformation flags="layer_apply" gravity="south"> </cl-transformation> <cl-transformation overlay="text:Playball_40:60%2525" color="white" y="80"> </cl-transformation> <cl-transformation width="200" crop="scale"> </cl-transformation> </cl-image>
cloudinary.Api.UrlImgUp.Transform(new Transformation() .Effect("trim").Chain() .Effect("colorize").Color("white").Chain() .Background("#D0CDCD").Chain() .Overlay(new Layer().PublicId("avatar")).Effect("trim").Width(1.0).Height(0.6).Gravity("south").Crop("crop").Chain() .Flags("layer_apply").Gravity("south").Chain() .Overlay(new TextLayer().FontFamily("Playball").FontSize(40).Text("60%2525")).Color("white").Y(80).Chain() .Width(200).Crop("scale")).BuildImageTag("avatar.jpg")
MediaManager.get().url().transformation(new Transformation() .effect("trim").chain() .effect("colorize").color("white").chain() .background("#D0CDCD").chain() .overlay(new Layer().publicId("avatar")).effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain() .flags("layer_apply").gravity("south").chain() .overlay(new TextLayer().fontFamily("Playball").fontSize(40).text("60%2525")).color("white").y(80).chain() .width(200).crop("scale")).generate("avatar.jpg");
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation() .setEffect("trim").chain() .setEffect("colorize").setColor("white").chain() .setBackground("#D0CDCD").chain() .setOverlay("avatar").setEffect("trim").setWidth(1.0).setHeight(0.6).setGravity("south").setCrop("crop").chain() .setFlags("layer_apply").setGravity("south").chain() .setOverlay("text:Playball_40:60%2525").setColor("white").setY(80).chain() .setWidth(200).setCrop("scale")).generate("avatar.jpg")!, cloudinary: cloudinary)
