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.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/black_bar.png
Ruby:
cl_image_tag("black_bar.png")
PHP:
cl_image_tag("black_bar.png")
Python:
CloudinaryImage("black_bar.png").image()
Node.js:
cloudinary.image("black_bar.png")
Java:
cloudinary.url().imageTag("black_bar.png");
JS:
cloudinary.imageTag('black_bar.png').toHtml();
jQuery:
$.cloudinary.image("black_bar.png")
React:
<Image publicId="black_bar.png" >

</Image>
Angular:
<cl-image public-id="black_bar.png" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("black_bar.png")
Android:
MediaManager.get().url().generate("black_bar.png");
iOS:
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.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
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:
cl_image_tag("black_bar.png", :width=>300, :height=>10, :effect=>"colorize", :color=>"white", :border=>"1px_solid_black", :crop=>"scale")
PHP:
cl_image_tag("black_bar.png", array("width"=>300, "height"=>10, "effect"=>"colorize", "color"=>"white", "border"=>"1px_solid_black", "crop"=>"scale"))
Python:
CloudinaryImage("black_bar.png").image(width=300, height=10, effect="colorize", color="white", border="1px_solid_black", crop="scale")
Node.js:
cloudinary.image("black_bar.png", {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale")).imageTag("black_bar.png");
JS:
cloudinary.imageTag('black_bar.png', {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("black_bar.png", {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"})
React:
<Image publicId="black_bar.png" >
  <Transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
</Image>
Angular:
<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:
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:
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:
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.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
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:
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:
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:
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:
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:
cloudinary.url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay("black_bar").width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale")).imageTag("black_bar.png");
JS:
cloudinary.imageTag('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"}
  ]}).toHtml();
jQuery:
$.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"}
  ]})
React:
<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>
Angular:
<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:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Height(10).Effect("colorize").Color("white").Border("1px_solid_black").Crop("scale").Chain()
  .Overlay("black_bar").Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale")).BuildImageTag("black_bar.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay("black_bar").width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale")).generate("black_bar.png");
iOS:
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.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
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:
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:
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:
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:
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:
cloudinary.url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay("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:
cloudinary.imageTag('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}
  ]}).toHtml();
jQuery:
$.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}
  ]})
React:
<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>
Angular:
<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:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Height(10).Effect("colorize").Color("white").Border("1px_solid_black").Crop("scale").Chain()
  .Overlay("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:
MediaManager.get().url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay("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:
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.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
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:
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:
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:
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:
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:
cloudinary.url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay("black_bar").width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay("black_bar").width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale")).imageTag("black_bar.png");
JS:
cloudinary.imageTag('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"}
  ]}).toHtml();
jQuery:
$.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"}
  ]})
React:
<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>
Angular:
<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:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Height(10).Effect("colorize").Color("white").Border("1px_solid_black").Crop("scale").Chain()
  .Overlay("black_bar").Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain()
  .Radius(3).Chain()
  .Underlay("black_bar").Width(400).Height(100).Effect("colorize").Color("#E9E8E8").Crop("scale")).BuildImageTag("black_bar.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay("black_bar").width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay("black_bar").width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale")).generate("black_bar.png");
iOS:
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.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
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:
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=>"text:Audiowide_20:70%2525", :color=>"#0D4190", :y=>-20},
  {:overlay=>"text:Audiowide_20:Profile%20completeness", :color=>"#0D4190", :y=>25}
  ])
PHP:
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"=>"text:Audiowide_20:70%2525", "color"=>"#0D4190", "y"=>-20),
  array("overlay"=>"text:Audiowide_20:Profile%20completeness", "color"=>"#0D4190", "y"=>25)
  )))
Python:
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": "text:Audiowide_20:70%2525", "color": "#0D4190", "y": -20},
  {"overlay": "text:Audiowide_20:Profile%20completeness", "color": "#0D4190", "y": 25}
  ])
Node.js:
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: "text:Audiowide_20:70%2525", color: "#0D4190", y: -20},
  {overlay: "text:Audiowide_20:Profile%20completeness", color: "#0D4190", y: 25}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay("black_bar").width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay("black_bar").width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay("text:Audiowide_20:70%2525").color("#0D4190").y(-20).chain()
  .overlay("text:Audiowide_20:Profile%20completeness").color("#0D4190").y(25)).imageTag("black_bar.png");
JS:
cloudinary.imageTag('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: "text:Audiowide_20:70%2525", color: "#0D4190", y: -20},
  {overlay: "text:Audiowide_20:Profile%20completeness", color: "#0D4190", y: 25}
  ]}).toHtml();
jQuery:
$.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: "text:Audiowide_20:70%2525", color: "#0D4190", y: -20},
  {overlay: "text:Audiowide_20:Profile%20completeness", color: "#0D4190", y: 25}
  ]})
React:
<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="text:Audiowide_20:70%2525" color="#0D4190" y="-20" />
  <Transformation overlay="text:Audiowide_20:Profile%20completeness" color="#0D4190" y="25" />
</Image>
Angular:
<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:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Height(10).Effect("colorize").Color("white").Border("1px_solid_black").Crop("scale").Chain()
  .Overlay("black_bar").Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain()
  .Radius(3).Chain()
  .Underlay("black_bar").Width(400).Height(100).Effect("colorize").Color("#E9E8E8").Crop("scale").Chain()
  .Overlay("text:Audiowide_20:70%2525").Color("#0D4190").Y(-20).Chain()
  .Overlay("text:Audiowide_20:Profile%20completeness").Color("#0D4190").Y(25)).BuildImageTag("black_bar.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay("black_bar").width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay("black_bar").width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay("text:Audiowide_20:70%2525").color("#0D4190").y(-20).chain()
  .overlay("text:Audiowide_20:Profile%20completeness").color("#0D4190").y(25)).generate("black_bar.png");
iOS:
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.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
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:
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=>"text:Audiowide_20:70%2525", :color=>"#0D4190", :y=>-20},
  {:overlay=>"text:Audiowide_20:Profile%20completeness", :color=>"#0D4190", :y=>25},
  {:overlay=>"badge", :width=>30, :gravity=>"north_west", :x=>10, :y=>10}
  ])
PHP:
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"=>"text:Audiowide_20:70%2525", "color"=>"#0D4190", "y"=>-20),
  array("overlay"=>"text:Audiowide_20:Profile%20completeness", "color"=>"#0D4190", "y"=>25),
  array("overlay"=>"badge", "width"=>30, "gravity"=>"north_west", "x"=>10, "y"=>10)
  )))
Python:
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": "text:Audiowide_20:70%2525", "color": "#0D4190", "y": -20},
  {"overlay": "text:Audiowide_20:Profile%20completeness", "color": "#0D4190", "y": 25},
  {"overlay": "badge", "width": 30, "gravity": "north_west", "x": 10, "y": 10}
  ])
Node.js:
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: "text:Audiowide_20:70%2525", color: "#0D4190", y: -20},
  {overlay: "text:Audiowide_20:Profile%20completeness", color: "#0D4190", y: 25},
  {overlay: "badge", width: 30, gravity: "north_west", x: 10, y: 10}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay("black_bar").width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay("black_bar").width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay("text:Audiowide_20:70%2525").color("#0D4190").y(-20).chain()
  .overlay("text:Audiowide_20:Profile%20completeness").color("#0D4190").y(25).chain()
  .overlay("badge").width(30).gravity("north_west").x(10).y(10)).imageTag("black_bar.png");
JS:
cloudinary.imageTag('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: "text:Audiowide_20:70%2525", color: "#0D4190", y: -20},
  {overlay: "text:Audiowide_20:Profile%20completeness", color: "#0D4190", y: 25},
  {overlay: "badge", width: 30, gravity: "north_west", x: 10, y: 10}
  ]}).toHtml();
jQuery:
$.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: "text:Audiowide_20:70%2525", color: "#0D4190", y: -20},
  {overlay: "text:Audiowide_20:Profile%20completeness", color: "#0D4190", y: 25},
  {overlay: "badge", width: 30, gravity: "north_west", x: 10, y: 10}
  ]})
React:
<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="text:Audiowide_20:70%2525" color="#0D4190" y="-20" />
  <Transformation overlay="text:Audiowide_20:Profile%20completeness" color="#0D4190" y="25" />
  <Transformation overlay="badge" width="30" gravity="north_west" x="10" y="10" />
</Image>
Angular:
<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:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Height(10).Effect("colorize").Color("white").Border("1px_solid_black").Crop("scale").Chain()
  .Overlay("black_bar").Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain()
  .Radius(3).Chain()
  .Underlay("black_bar").Width(400).Height(100).Effect("colorize").Color("#E9E8E8").Crop("scale").Chain()
  .Overlay("text:Audiowide_20:70%2525").Color("#0D4190").Y(-20).Chain()
  .Overlay("text:Audiowide_20:Profile%20completeness").Color("#0D4190").Y(25).Chain()
  .Overlay("badge").Width(30).Gravity("north_west").X(10).Y(10)).BuildImageTag("black_bar.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay("black_bar").width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay("black_bar").width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay("text:Audiowide_20:70%2525").color("#0D4190").y(-20).chain()
  .overlay("text:Audiowide_20:Profile%20completeness").color("#0D4190").y(25).chain()
  .overlay("badge").width(30).gravity("north_west").x(10).y(10)).generate("black_bar.png");
iOS:
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.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
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:
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=>"text:Audiowide_20:70%2525", :color=>"#0D4190", :y=>-20},
  {:overlay=>"text:Audiowide_20:Profile%20completeness", :color=>"#0D4190", :y=>25},
  {:overlay=>"badge", :width=>30, :gravity=>"north_west", :x=>10, :y=>10},
  {:radius=>20},
  {:effect=>"shadow"}
  ])
PHP:
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"=>"text:Audiowide_20:70%2525", "color"=>"#0D4190", "y"=>-20),
  array("overlay"=>"text:Audiowide_20: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:
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": "text:Audiowide_20:70%2525", "color": "#0D4190", "y": -20},
  {"overlay": "text:Audiowide_20:Profile%20completeness", "color": "#0D4190", "y": 25},
  {"overlay": "badge", "width": 30, "gravity": "north_west", "x": 10, "y": 10},
  {"radius": 20},
  {"effect": "shadow"}
  ])
Node.js:
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: "text:Audiowide_20:70%2525", color: "#0D4190", y: -20},
  {overlay: "text:Audiowide_20:Profile%20completeness", color: "#0D4190", y: 25},
  {overlay: "badge", width: 30, gravity: "north_west", x: 10, y: 10},
  {radius: 20},
  {effect: "shadow"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay("black_bar").width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay("black_bar").width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay("text:Audiowide_20:70%2525").color("#0D4190").y(-20).chain()
  .overlay("text:Audiowide_20:Profile%20completeness").color("#0D4190").y(25).chain()
  .overlay("badge").width(30).gravity("north_west").x(10).y(10).chain()
  .radius(20).chain()
  .effect("shadow")).imageTag("black_bar.png");
JS:
cloudinary.imageTag('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: "text:Audiowide_20:70%2525", color: "#0D4190", y: -20},
  {overlay: "text:Audiowide_20:Profile%20completeness", color: "#0D4190", y: 25},
  {overlay: "badge", width: 30, gravity: "north_west", x: 10, y: 10},
  {radius: 20},
  {effect: "shadow"}
  ]}).toHtml();
jQuery:
$.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: "text:Audiowide_20:70%2525", color: "#0D4190", y: -20},
  {overlay: "text:Audiowide_20:Profile%20completeness", color: "#0D4190", y: 25},
  {overlay: "badge", width: 30, gravity: "north_west", x: 10, y: 10},
  {radius: 20},
  {effect: "shadow"}
  ]})
React:
<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="text:Audiowide_20:70%2525" color="#0D4190" y="-20" />
  <Transformation overlay="text:Audiowide_20: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>
Angular:
<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:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Height(10).Effect("colorize").Color("white").Border("1px_solid_black").Crop("scale").Chain()
  .Overlay("black_bar").Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain()
  .Radius(3).Chain()
  .Underlay("black_bar").Width(400).Height(100).Effect("colorize").Color("#E9E8E8").Crop("scale").Chain()
  .Overlay("text:Audiowide_20:70%2525").Color("#0D4190").Y(-20).Chain()
  .Overlay("text:Audiowide_20:Profile%20completeness").Color("#0D4190").Y(25).Chain()
  .Overlay("badge").Width(30).Gravity("north_west").X(10).Y(10).Chain()
  .Radius(20).Chain()
  .Effect("shadow")).BuildImageTag("black_bar.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay("black_bar").width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay("black_bar").width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay("text:Audiowide_20:70%2525").color("#0D4190").y(-20).chain()
  .overlay("text:Audiowide_20:Profile%20completeness").color("#0D4190").y(25).chain()
  .overlay("badge").width(30).gravity("north_west").x(10).y(10).chain()
  .radius(20).chain()
  .effect("shadow")).generate("black_bar.png");
iOS:
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.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
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:
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=>"text:Audiowide_20: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:
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"=>"text:Audiowide_20: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:
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": "text:Audiowide_20: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:
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: "text:Audiowide_20: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:
cloudinary.url().transformation(new Transformation()
  .width(300).height(40).effect("colorize").color("#949494").crop("scale").chain()
  .overlay("black_bar").width(0.5).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(10).chain()
  .underlay("black_bar").width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay("text:Audiowide_20:50%2525").color("white").opacity(70).chain()
  .overlay("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:
cloudinary.imageTag('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: "text:Audiowide_20: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"}
  ]}).toHtml();
jQuery:
$.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: "text:Audiowide_20: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"}
  ]})
React:
<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="text:Audiowide_20: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>
Angular:
<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:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(300).Height(40).Effect("colorize").Color("#949494").Crop("scale").Chain()
  .Overlay("black_bar").Width(0.5).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain()
  .Radius(10).Chain()
  .Underlay("black_bar").Width(400).Height(100).Effect("colorize").Color("#E9E8E8").Crop("scale").Chain()
  .Overlay("text:Audiowide_20:50%2525").Color("white").Opacity(70).Chain()
  .Overlay("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:
MediaManager.get().url().transformation(new Transformation()
  .width(300).height(40).effect("colorize").color("#949494").crop("scale").chain()
  .overlay("black_bar").width(0.5).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(10).chain()
  .underlay("black_bar").width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay("text:Audiowide_20:50%2525").color("white").opacity(70).chain()
  .overlay("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:
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.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
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:
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=>"text:Playball_40:60%2525", :color=>"white", :y=>80},
  {:width=>200, :crop=>"scale"}
  ])
PHP:
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"=>"text:Playball_40:60%2525", "color"=>"white", "y"=>80),
  array("width"=>200, "crop"=>"scale")
  )))
Python:
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": "text:Playball_40:60%2525", "color": "white", "y": 80},
  {"width": 200, "crop": "scale"}
  ])
Node.js:
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: "text:Playball_40:60%2525", color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("trim").chain()
  .effect("colorize").color("white").chain()
  .background("#D0CDCD").chain()
  .overlay("avatar").effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain()
  .flags("layer_apply").gravity("south").chain()
  .overlay("text:Playball_40:60%2525").color("white").y(80).chain()
  .width(200).crop("scale")).imageTag("avatar.jpg");
JS:
cloudinary.imageTag('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: "text:Playball_40:60%2525", color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]}).toHtml();
jQuery:
$.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: "text:Playball_40:60%2525", color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]})
React:
<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="text:Playball_40:60%2525" color="white" y="80" />
  <Transformation width="200" crop="scale" />
</Image>
Angular:
<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:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("trim").Chain()
  .Effect("colorize").Color("white").Chain()
  .Background("#D0CDCD").Chain()
  .Overlay("avatar").Effect("trim").Width(1.0).Height(0.6).Gravity("south").Crop("crop").Chain()
  .Flags("layer_apply").Gravity("south").Chain()
  .Overlay("text:Playball_40:60%2525").Color("white").Y(80).Chain()
  .Width(200).Crop("scale")).BuildImageTag("avatar.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .effect("trim").chain()
  .effect("colorize").color("white").chain()
  .background("#D0CDCD").chain()
  .overlay("avatar").effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain()
  .flags("layer_apply").gravity("south").chain()
  .overlay("text:Playball_40:60%2525").color("white").y(80).chain()
  .width(200).crop("scale")).generate("avatar.jpg");
iOS:
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: