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:

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:
cl.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")
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:

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:
cl.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" width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale">
        <Transformation width=300 height=10 effect="colorize" color="white" border="1px_solid_black" crop="scale" />
</Image>
Angular:
<cl-image public-id="black_bar.png" width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale">
        <cl-transformation width=300 height=10 effect="colorize" color="white" border="1px_solid_black" crop="scale" />
</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")
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:

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:
cl.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 overlay="black_bar" width=0.7 height=1.0 effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
</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")
Blue bar

We add nice looking rounded corners, so:

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:
cl.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 overlay="black_bar" width=0.7 height=1.0 effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
        <cl-transformation radius=3 />
</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")
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):

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:
cl.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 overlay="black_bar" width=0.7 height=1.0 effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
        <cl-transformation radius=3 />
        <cl-transformation underlay="black_bar" width=400 height=100 effect="colorize" color="#E9E8E8" crop="scale" />
</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")
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:

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:
cl.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 overlay="black_bar" width=0.7 height=1.0 effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
        <cl-transformation radius=3 />
        <cl-transformation underlay="black_bar" width=400 height=100 effect="colorize" color="#E9E8E8" crop="scale" />
        <cl-transformation overlay="text:Audiowide_20:70%2525" color="#0D4190" y=-20 />
        <cl-transformation overlay="text:Audiowide_20:Profile%20completeness" color="#0D4190" y=25 />
</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")
Added text

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

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:
cl.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 overlay="black_bar" width=0.7 height=1.0 effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
        <cl-transformation radius=3 />
        <cl-transformation underlay="black_bar" width=400 height=100 effect="colorize" color="#E9E8E8" crop="scale" />
        <cl-transformation overlay="text:Audiowide_20:70%2525" color="#0D4190" y=-20 />
        <cl-transformation overlay="text:Audiowide_20:Profile%20completeness" color="#0D4190" y=25 />
        <cl-transformation overlay="badge" width=30 gravity="north_west" x=10 y=10 />
</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")
Added a badge

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

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:
cl.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 overlay="black_bar" width=0.7 height=1.0 effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
        <cl-transformation radius=3 />
        <cl-transformation underlay="black_bar" width=400 height=100 effect="colorize" color="#E9E8E8" crop="scale" />
        <cl-transformation overlay="text:Audiowide_20:70%2525" color="#0D4190" y=-20 />
        <cl-transformation overlay="text:Audiowide_20:Profile%20completeness" color="#0D4190" y=25 />
        <cl-transformation overlay="badge" width=30 gravity="north_west" x=10 y=10 />
        <cl-transformation radius=20 />
        <cl-transformation effect="shadow" />
</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")
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:

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:
cl.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 overlay="black_bar" width=0.5 height=1.0 effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
        <cl-transformation radius=10 />
        <cl-transformation underlay="black_bar" width=400 height=100 effect="colorize" color="#E9E8E8" crop="scale" />
        <cl-transformation overlay="text:Audiowide_20:50%2525" color="white" opacity=70 />
        <cl-transformation overlay="facebook:billclinton.png" width=40 height=40 radius="max" gravity="north_west" x=7 y=7 />
        <cl-transformation radius=20 />
        <cl-transformation effect="shadow" />
</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")
User's thumbnail

Lastly, an avatar progress bar:

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:
cl.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 effect="colorize" color="white" />
        <cl-transformation background="#D0CDCD" />
        <cl-transformation overlay="avatar" effect="trim" width=1.0 height=0.6 gravity="south" crop="crop" />
        <cl-transformation flags="layer_apply" gravity="south" />
        <cl-transformation overlay="text:Playball_40:60%2525" color="white" y=80 />
        <cl-transformation width=200 crop="scale" />
</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")
Avatar meter

by Itay Taragano