Cloudinary cookbook background
Cloudinary Cookbook
← View popular recipes
Find recipes by tags:
View all tags

Generate a profile completeness meter

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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/black_bar.png
Ruby:
Copy to clipboard
cl_image_tag("black_bar.png")
PHP:
Copy to clipboard
cl_image_tag("black_bar.png")
Python:
Copy to clipboard
CloudinaryImage("black_bar.png").image()
Node.js:
Copy to clipboard
cloudinary.image("black_bar.png")
Java:
Copy to clipboard
cloudinary.url().imageTag("black_bar.png");
JS:
Copy to clipboard
cloudinary.imageTag('black_bar.png').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("black_bar.png")
React:
Copy to clipboard
<Image publicId="black_bar.png" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="black_bar.png" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="black_bar.png" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("black_bar.png")
Android:
Copy to clipboard
MediaManager.get().url().generate("black_bar.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("black_bar.png")!, cloudinary: cloudinary)
Black Bar

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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/w_300,h_10,c_scale,e_colorize,co_white,bo_1px_solid_black/black_bar.png
Ruby:
Copy to clipboard
cl_image_tag("black_bar.png", :width=>300, :height=>10, :effect=>"colorize", :color=>"white", :border=>"1px_solid_black", :crop=>"scale")
PHP:
Copy to clipboard
cl_image_tag("black_bar.png", array("width"=>300, "height"=>10, "effect"=>"colorize", "color"=>"white", "border"=>"1px_solid_black", "crop"=>"scale"))
Python:
Copy to clipboard
CloudinaryImage("black_bar.png").image(width=300, height=10, effect="colorize", color="white", border="1px_solid_black", crop="scale")
Node.js:
Copy to clipboard
cloudinary.image("black_bar.png", {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale")).imageTag("black_bar.png");
JS:
Copy to clipboard
cloudinary.imageTag('black_bar.png', {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("black_bar.png", {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"})
React:
Copy to clipboard
<Image publicId="black_bar.png" >
  <Transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<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>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(10).Effect("colorize").Color("white").Border("1px_solid_black").Crop("scale")).BuildImageTag("black_bar.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale")).generate("black_bar.png");
iOS:
Copy to clipboard
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)
White bar

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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
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
Ruby:
Copy to clipboard
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"}
  ])
PHP:
Copy to clipboard
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")
  )))
Python:
Copy to clipboard
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"}
  ])
Node.js:
Copy to clipboard
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"}
  ]})
Java:
Copy to clipboard
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");
JS:
Copy to clipboard
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();
jQuery:
Copy to clipboard
$.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"}
  ]})
React:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <cld-transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<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>
.Net:
Copy to clipboard
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")
Android:
Copy to clipboard
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");
iOS:
Copy to clipboard
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)
Blue bar

We add nice looking rounded corners, so:

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
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
Ruby:
Copy to clipboard
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}
  ])
PHP:
Copy to clipboard
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)
  )))
Python:
Copy to clipboard
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}
  ])
Node.js:
Copy to clipboard
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}
  ]})
Java:
Copy to clipboard
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");
JS:
Copy to clipboard
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();
jQuery:
Copy to clipboard
$.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}
  ]})
React:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <cld-transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <cld-transformation radius="3" />
</cld-image>
Angular:
Copy to clipboard
<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>
.Net:
Copy to clipboard
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")
Android:
Copy to clipboard
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");
iOS:
Copy to clipboard
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)
Rounded corners

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

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
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
Ruby:
Copy to clipboard
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"}
  ])
PHP:
Copy to clipboard
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")
  )))
Python:
Copy to clipboard
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"}
  ])
Node.js:
Copy to clipboard
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"}
  ]})
Java:
Copy to clipboard
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");
JS:
Copy to clipboard
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();
jQuery:
Copy to clipboard
$.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"}
  ]})
React:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <cld-transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <cld-transformation radius="3" />
  <cld-transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<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>
.Net:
Copy to clipboard
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")
Android:
Copy to clipboard
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");
iOS:
Copy to clipboard
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)
Grey background

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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
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
Ruby:
Copy to clipboard
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}
  ])
PHP:
Copy to clipboard
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)
  )))
Python:
Copy to clipboard
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}
  ])
Node.js:
Copy to clipboard
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}
  ]})
Java:
Copy to clipboard
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");
JS:
Copy to clipboard
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();
jQuery:
Copy to clipboard
$.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}
  ]})
React:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <cld-transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <cld-transformation radius="3" />
  <cld-transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" />
  <cld-transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "70%2525"}} color="#0D4190" y="-20" />
  <cld-transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "Profile%20completeness"}} color="#0D4190" y="25" />
</cld-image>
Angular:
Copy to clipboard
<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>
.Net:
Copy to clipboard
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")
Android:
Copy to clipboard
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");
iOS:
Copy to clipboard
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)
Added text

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

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
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
Ruby:
Copy to clipboard
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}
  ])
PHP:
Copy to clipboard
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)
  )))
Python:
Copy to clipboard
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}
  ])
Node.js:
Copy to clipboard
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}
  ]})
Java:
Copy to clipboard
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");
JS:
Copy to clipboard
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();
jQuery:
Copy to clipboard
$.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}
  ]})
React:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <cld-transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <cld-transformation radius="3" />
  <cld-transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" />
  <cld-transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "70%2525"}} color="#0D4190" y="-20" />
  <cld-transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "Profile%20completeness"}} color="#0D4190" y="25" />
  <cld-transformation overlay="badge" width="30" gravity="north_west" x="10" y="10" />
</cld-image>
Angular:
Copy to clipboard
<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>
.Net:
Copy to clipboard
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")
Android:
Copy to clipboard
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");
iOS:
Copy to clipboard
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)
Added a badge

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

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
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
Ruby:
Copy to clipboard
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"}
  ])
PHP:
Copy to clipboard
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")
  )))
Python:
Copy to clipboard
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"}
  ])
Node.js:
Copy to clipboard
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"}
  ]})
Java:
Copy to clipboard
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");
JS:
Copy to clipboard
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();
jQuery:
Copy to clipboard
$.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"}
  ]})
React:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <cld-transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <cld-transformation radius="3" />
  <cld-transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" />
  <cld-transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "70%2525"}} color="#0D4190" y="-20" />
  <cld-transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "Profile%20completeness"}} color="#0D4190" y="25" />
  <cld-transformation overlay="badge" width="30" gravity="north_west" x="10" y="10" />
  <cld-transformation radius="20" />
  <cld-transformation effect="shadow" />
</cld-image>
Angular:
Copy to clipboard
<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>
.Net:
Copy to clipboard
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")
Android:
Copy to clipboard
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");
iOS:
Copy to clipboard
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)
Badge meter

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:

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
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
Ruby:
Copy to clipboard
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"}
  ])
PHP:
Copy to clipboard
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")
  )))
Python:
Copy to clipboard
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"}
  ])
Node.js:
Copy to clipboard
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"}
  ]})
Java:
Copy to clipboard
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");
JS:
Copy to clipboard
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();
jQuery:
Copy to clipboard
$.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"}
  ]})
React:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="40" effect="colorize" color="#949494" crop="scale" />
  <cld-transformation overlay="black_bar" width="0.5" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <cld-transformation radius="10" />
  <cld-transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" />
  <cld-transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "50%2525"}} color="white" opacity="70" />
  <cld-transformation overlay="facebook:billclinton.png" width="40" height="40" radius="max" gravity="north_west" x="7" y="7" />
  <cld-transformation radius="20" />
  <cld-transformation effect="shadow" />
</cld-image>
Angular:
Copy to clipboard
<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>
.Net:
Copy to clipboard
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")
Android:
Copy to clipboard
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");
iOS:
Copy to clipboard
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)
User's thumbnail

Lastly, an avatar progress bar:

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
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
Ruby:
Copy to clipboard
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"}
  ])
PHP:
Copy to clipboard
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")
  )))
Python:
Copy to clipboard
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"}
  ])
Node.js:
Copy to clipboard
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"}
  ]})
Java:
Copy to clipboard
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");
JS:
Copy to clipboard
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();
jQuery:
Copy to clipboard
$.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"}
  ]})
React:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="avatar.jpg" >
  <cld-transformation effect="trim" />
  <cld-transformation effect="colorize" color="white" />
  <cld-transformation background="#D0CDCD" />
  <cld-transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop" />
  <cld-transformation flags="layer_apply" gravity="south" />
  <cld-transformation overlay={{fontFamily: "Playball", fontSize: 40, text: "60%2525"}} color="white" y="80" />
  <cld-transformation width="200" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<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>
.Net:
Copy to clipboard
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")
Android:
Copy to clipboard
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");
iOS:
Copy to clipboard
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)
Avatar meter

by Itay Taragano
Tags: