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:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

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

Ruby:

cl_image_tag("black_bar.png")

PHP v1:

cl_image_tag("black_bar.png")

PHP v2:

(new ImageTag('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>

Vue.js:

<cld-image publicId="black_bar.png" >

</cld-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)

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:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

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 v1:

cl_image_tag("black_bar.png", array("width"=>300, "height"=>10, "effect"=>"colorize", "color"=>"white", "border"=>"1px_solid_black", "crop"=>"scale"))

PHP v2:

(new ImageTag('black_bar.png'))
  ->border(Border::solid(1, Color::BLACK))
  ->resize(Resize::scale()->width(300)->height(10))
  ->effect(Effect::colorize()->color(Color::WHITE));

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>

Vue.js:

<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
</cld-image>

Angular:

<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)

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:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

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 v1:

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")
  )))

PHP v2:

(new ImageTag('black_bar.png'))
  ->border(Border::solid(1, Color::BLACK))
  ->resize(Resize::scale()->width(300)->height(10))
  ->effect(Effect::colorize()->color(Color::WHITE))
  ->overlay(
      Overlay::source(Source::image('black_bar')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(0.7)->height(1.0)->relative())
          ->effect(Effect::colorize()->color(Color::rgb('0D4190')))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::west()))
  ));

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(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale")).imageTag("black_bar.png");

JS:

cloudinary.imageTag('black_bar.png', {transformation: [
  {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("black_bar.png", {transformation: [
  {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"}
  ]})

React:

<Image publicId="black_bar.png" >
  <Transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <Transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
</Image>

Vue.js:

<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <cld-transformation :overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
</cld-image>

Angular:

<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(new Layer().PublicId("black_bar")).Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale")).BuildImageTag("black_bar.png")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale")).generate("black_bar.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(300).setHeight(10).setEffect("colorize").setColor("white").setBorder("1px_solid_black").setCrop("scale").chain()
  .setOverlay("black_bar").setWidth(0.7).setHeight(1.0).setEffect("colorize").setColor("#0D4190").setFlags("relative").setGravity("west").setCrop("scale")).generate("black_bar.png")!, cloudinary: cloudinary)

We add nice looking rounded corners, so:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

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 v1:

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)
  )))

PHP v2:

(new ImageTag('black_bar.png'))
  ->border(Border::solid(1, Color::BLACK))
  ->resize(Resize::scale()->width(300)->height(10))
  ->effect(Effect::colorize()->color(Color::WHITE))
  ->overlay(
      Overlay::source(Source::image('black_bar')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(0.7)->height(1.0)->relative())
          ->effect(Effect::colorize()->color(Color::rgb('0D4190')))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::west()))))
    ->roundCorners(RoundCorners::byRadius(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(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3)).imageTag("black_bar.png");

JS:

cloudinary.imageTag('black_bar.png', {transformation: [
  {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 3}
  ]}).toHtml();

jQuery:

$.cloudinary.image("black_bar.png", {transformation: [
  {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 3}
  ]})

React:

<Image publicId="black_bar.png" >
  <Transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <Transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <Transformation radius="3" />
</Image>

Vue.js:

<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <cld-transformation :overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <cld-transformation radius="3" />
</cld-image>

Angular:

<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(new Layer().PublicId("black_bar")).Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain()
  .Radius(3)).BuildImageTag("black_bar.png")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3)).generate("black_bar.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(300).setHeight(10).setEffect("colorize").setColor("white").setBorder("1px_solid_black").setCrop("scale").chain()
  .setOverlay("black_bar").setWidth(0.7).setHeight(1.0).setEffect("colorize").setColor("#0D4190").setFlags("relative").setGravity("west").setCrop("scale").chain()
  .setRadius(3)).generate("black_bar.png")!, cloudinary: cloudinary)

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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

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 v1:

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")
  )))

PHP v2:

(new ImageTag('black_bar.png'))
  ->border(Border::solid(1, Color::BLACK))
  ->resize(Resize::scale()->width(300)->height(10))
  ->effect(Effect::colorize()->color(Color::WHITE))
  ->overlay(
      Overlay::source(Source::image('black_bar')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(0.7)->height(1.0)->relative())
          ->effect(Effect::colorize()->color(Color::rgb('0D4190')))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::west()))))
    ->roundCorners(RoundCorners::byRadius(3))
    ->underlay(
        Underlay::source(Source::image('black_bar')
          ->transformation((new ImageTransformation())
            ->resize(Resize::scale()->width(400)->height(100))
            ->effect(Effect::colorize()->color(Color::rgb('E9E8E8')))
      
    )));

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(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale")).imageTag("black_bar.png");

JS:

cloudinary.imageTag('black_bar.png', {transformation: [
  {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 3},
  {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("black_bar.png", {transformation: [
  {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 3},
  {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"}
  ]})

React:

<Image publicId="black_bar.png" >
  <Transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <Transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <Transformation radius="3" />
  <Transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" />
</Image>

Vue.js:

<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <cld-transformation :overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <cld-transformation radius="3" />
  <cld-transformation :underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" />
</cld-image>

Angular:

<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(new Layer().PublicId("black_bar")).Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain()
  .Radius(3).Chain()
  .Underlay(new Layer().PublicId("black_bar")).Width(400).Height(100).Effect("colorize").Color("#E9E8E8").Crop("scale")).BuildImageTag("black_bar.png")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale")).generate("black_bar.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(300).setHeight(10).setEffect("colorize").setColor("white").setBorder("1px_solid_black").setCrop("scale").chain()
  .setOverlay("black_bar").setWidth(0.7).setHeight(1.0).setEffect("colorize").setColor("#0D4190").setFlags("relative").setGravity("west").setCrop("scale").chain()
  .setRadius(3).chain()
  .setUnderlay("black_bar").setWidth(400).setHeight(100).setEffect("colorize").setColor("#E9E8E8").setCrop("scale")).generate("black_bar.png")!, cloudinary: cloudinary)

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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

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=>{:font_family=>"Audiowide", :font_size=>20, :text=>"70%2525"}, :color=>"#0D4190", :y=>-20},
  {:overlay=>{:font_family=>"Audiowide", :font_size=>20, :text=>"Profile%20completeness"}, :color=>"#0D4190", :y=>25}
  ])

PHP v1:

cl_image_tag("black_bar.png", array("transformation"=>array(
  array("width"=>300, "height"=>10, "effect"=>"colorize", "color"=>"white", "border"=>"1px_solid_black", "crop"=>"scale"),
  array("overlay"=>"black_bar", "width"=>"0.7", "height"=>"1.0", "effect"=>"colorize", "color"=>"#0D4190", "flags"=>"relative", "gravity"=>"west", "crop"=>"scale"),
  array("radius"=>3),
  array("underlay"=>"black_bar", "width"=>400, "height"=>100, "effect"=>"colorize", "color"=>"#E9E8E8", "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Audiowide", "font_size"=>20, "text"=>"70%2525"), "color"=>"#0D4190", "y"=>-20),
  array("overlay"=>array("font_family"=>"Audiowide", "font_size"=>20, "text"=>"Profile%20completeness"), "color"=>"#0D4190", "y"=>25)
  )))

PHP v2:

(new ImageTag('black_bar.png'))
  ->border(Border::solid(1, Color::BLACK))
  ->resize(Resize::scale()->width(300)->height(10))
  ->effect(Effect::colorize()->color(Color::WHITE))
  ->overlay(
      Overlay::source(Source::image('black_bar')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(0.7)->height(1.0)->relative())
          ->effect(Effect::colorize()->color(Color::rgb('0D4190')))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::west()))))
    ->roundCorners(RoundCorners::byRadius(3))
    ->underlay(
        Underlay::source(Source::image('black_bar')
          ->transformation((new ImageTransformation())
            ->resize(Resize::scale()->width(400)->height(100))
            ->effect(Effect::colorize()->color(Color::rgb('E9E8E8'))))))
          ->overlay(
              Overlay::source(Source::text('70%25', (new TextStyle('Audiowide', 20)))
                ->textColor(Color::rgb('0D4190')))
              ->position((new Position())
                ->offsetY(-20)))
            ->overlay(
                Overlay::source(Source::text('Profile completeness', (new TextStyle('Audiowide', 20)))
                  ->textColor(Color::rgb('0D4190')))
                ->position((new Position())
                  ->offsetY(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': {'font_family': "Audiowide", 'font_size': 20, 'text': "70%2525"}, 'color': "#0D4190", 'y': -20},
  {'overlay': {'font_family': "Audiowide", 'font_size': 20, 'text': "Profile%20completeness"}, 'color': "#0D4190", 'y': 25}
  ])

Node.js:

cloudinary.image("black_bar.png", {transformation: [
  {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"},
  {overlay: "black_bar", width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 3},
  {underlay: "black_bar", width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"},
  {overlay: {font_family: "Audiowide", font_size: 20, text: "70%2525"}, color: "#0D4190", y: -20},
  {overlay: {font_family: "Audiowide", font_size: 20, text: "Profile%20completeness"}, color: "#0D4190", y: 25}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525")).color("#0D4190").y(-20).chain()
  .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness")).color("#0D4190").y(25)).imageTag("black_bar.png");

JS:

cloudinary.imageTag('black_bar.png', {transformation: [
  {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 3},
  {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525"), color: "#0D4190", y: -20},
  {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness"), color: "#0D4190", y: 25}
  ]}).toHtml();

jQuery:

$.cloudinary.image("black_bar.png", {transformation: [
  {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 3},
  {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525"), color: "#0D4190", y: -20},
  {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness"), color: "#0D4190", y: 25}
  ]})

React:

<Image publicId="black_bar.png" >
  <Transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <Transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <Transformation radius="3" />
  <Transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" />
  <Transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "70%2525"}} color="#0D4190" y="-20" />
  <Transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "Profile%20completeness"}} color="#0D4190" y="25" />
</Image>

Vue.js:

<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <cld-transformation :overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <cld-transformation radius="3" />
  <cld-transformation :underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Audiowide', fontSize: 20, text: '70%2525'}" color="#0D4190" y="-20" />
  <cld-transformation :overlay="{fontFamily: 'Audiowide', fontSize: 20, text: 'Profile%20completeness'}" color="#0D4190" y="25" />
</cld-image>

Angular:

<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(new Layer().PublicId("black_bar")).Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain()
  .Radius(3).Chain()
  .Underlay(new Layer().PublicId("black_bar")).Width(400).Height(100).Effect("colorize").Color("#E9E8E8").Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Audiowide").FontSize(20).Text("70%2525")).Color("#0D4190").Y(-20).Chain()
  .Overlay(new TextLayer().FontFamily("Audiowide").FontSize(20).Text("Profile%20completeness")).Color("#0D4190").Y(25)).BuildImageTag("black_bar.png")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525")).color("#0D4190").y(-20).chain()
  .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness")).color("#0D4190").y(25)).generate("black_bar.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(300).setHeight(10).setEffect("colorize").setColor("white").setBorder("1px_solid_black").setCrop("scale").chain()
  .setOverlay("black_bar").setWidth(0.7).setHeight(1.0).setEffect("colorize").setColor("#0D4190").setFlags("relative").setGravity("west").setCrop("scale").chain()
  .setRadius(3).chain()
  .setUnderlay("black_bar").setWidth(400).setHeight(100).setEffect("colorize").setColor("#E9E8E8").setCrop("scale").chain()
  .setOverlay("text:Audiowide_20:70%2525").setColor("#0D4190").setY(-20).chain()
  .setOverlay("text:Audiowide_20:Profile%20completeness").setColor("#0D4190").setY(25)).generate("black_bar.png")!, cloudinary: cloudinary)

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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

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=>{:font_family=>"Audiowide", :font_size=>20, :text=>"70%2525"}, :color=>"#0D4190", :y=>-20},
  {:overlay=>{:font_family=>"Audiowide", :font_size=>20, :text=>"Profile%20completeness"}, :color=>"#0D4190", :y=>25},
  {:overlay=>"badge", :width=>30, :gravity=>"north_west", :x=>10, :y=>10}
  ])

PHP v1:

cl_image_tag("black_bar.png", array("transformation"=>array(
  array("width"=>300, "height"=>10, "effect"=>"colorize", "color"=>"white", "border"=>"1px_solid_black", "crop"=>"scale"),
  array("overlay"=>"black_bar", "width"=>"0.7", "height"=>"1.0", "effect"=>"colorize", "color"=>"#0D4190", "flags"=>"relative", "gravity"=>"west", "crop"=>"scale"),
  array("radius"=>3),
  array("underlay"=>"black_bar", "width"=>400, "height"=>100, "effect"=>"colorize", "color"=>"#E9E8E8", "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Audiowide", "font_size"=>20, "text"=>"70%2525"), "color"=>"#0D4190", "y"=>-20),
  array("overlay"=>array("font_family"=>"Audiowide", "font_size"=>20, "text"=>"Profile%20completeness"), "color"=>"#0D4190", "y"=>25),
  array("overlay"=>"badge", "width"=>30, "gravity"=>"north_west", "x"=>10, "y"=>10)
  )))

PHP v2:

(new ImageTag('black_bar.png'))
  ->border(Border::solid(1, Color::BLACK))
  ->resize(Resize::scale()->width(300)->height(10))
  ->effect(Effect::colorize()->color(Color::WHITE))
  ->overlay(
      Overlay::source(Source::image('black_bar')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(0.7)->height(1.0)->relative())
          ->effect(Effect::colorize()->color(Color::rgb('0D4190')))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::west()))))
    ->roundCorners(RoundCorners::byRadius(3))
    ->underlay(
        Underlay::source(Source::image('black_bar')
          ->transformation((new ImageTransformation())
            ->resize(Resize::scale()->width(400)->height(100))
            ->effect(Effect::colorize()->color(Color::rgb('E9E8E8'))))))
          ->overlay(
              Overlay::source(Source::text('70%25', (new TextStyle('Audiowide', 20)))
                ->textColor(Color::rgb('0D4190')))
              ->position((new Position())
                ->offsetY(-20)))
            ->overlay(
                Overlay::source(Source::text('Profile completeness', (new TextStyle('Audiowide', 20)))
                  ->textColor(Color::rgb('0D4190')))
                ->position((new Position())
                  ->offsetY(25)))
                  ->overlay(
                      Overlay::source(Source::image('badge')
                        ->transformation((new ImageTransformation())
                          ->resize(Resize::scale()->width(30))))
                      ->position((new Position())
                        ->gravity(Gravity::compass(Compass::northWest()))
                        ->offsetX(10)->offsetY(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': {'font_family': "Audiowide", 'font_size': 20, 'text': "70%2525"}, 'color': "#0D4190", 'y': -20},
  {'overlay': {'font_family': "Audiowide", 'font_size': 20, 'text': "Profile%20completeness"}, 'color': "#0D4190", 'y': 25},
  {'overlay': "badge", 'width': 30, 'gravity': "north_west", 'x': 10, 'y': 10}
  ])

Node.js:

cloudinary.image("black_bar.png", {transformation: [
  {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"},
  {overlay: "black_bar", width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 3},
  {underlay: "black_bar", width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"},
  {overlay: {font_family: "Audiowide", font_size: 20, text: "70%2525"}, color: "#0D4190", y: -20},
  {overlay: {font_family: "Audiowide", font_size: 20, text: "Profile%20completeness"}, color: "#0D4190", y: 25},
  {overlay: "badge", width: 30, gravity: "north_west", x: 10, y: 10}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525")).color("#0D4190").y(-20).chain()
  .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness")).color("#0D4190").y(25).chain()
  .overlay(new Layer().publicId("badge")).width(30).gravity("north_west").x(10).y(10)).imageTag("black_bar.png");

JS:

cloudinary.imageTag('black_bar.png', {transformation: [
  {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 3},
  {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525"), color: "#0D4190", y: -20},
  {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness"), color: "#0D4190", y: 25},
  {overlay: new cloudinary.Layer().publicId("badge"), width: 30, gravity: "north_west", x: 10, y: 10}
  ]}).toHtml();

jQuery:

$.cloudinary.image("black_bar.png", {transformation: [
  {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 3},
  {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525"), color: "#0D4190", y: -20},
  {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness"), color: "#0D4190", y: 25},
  {overlay: new cloudinary.Layer().publicId("badge"), width: 30, gravity: "north_west", x: 10, y: 10}
  ]})

React:

<Image publicId="black_bar.png" >
  <Transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <Transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <Transformation radius="3" />
  <Transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" />
  <Transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "70%2525"}} color="#0D4190" y="-20" />
  <Transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "Profile%20completeness"}} color="#0D4190" y="25" />
  <Transformation overlay="badge" width="30" gravity="north_west" x="10" y="10" />
</Image>

Vue.js:

<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <cld-transformation :overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <cld-transformation radius="3" />
  <cld-transformation :underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Audiowide', fontSize: 20, text: '70%2525'}" color="#0D4190" y="-20" />
  <cld-transformation :overlay="{fontFamily: 'Audiowide', fontSize: 20, text: 'Profile%20completeness'}" color="#0D4190" y="25" />
  <cld-transformation :overlay="badge" width="30" gravity="north_west" x="10" y="10" />
</cld-image>

Angular:

<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(new Layer().PublicId("black_bar")).Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain()
  .Radius(3).Chain()
  .Underlay(new Layer().PublicId("black_bar")).Width(400).Height(100).Effect("colorize").Color("#E9E8E8").Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Audiowide").FontSize(20).Text("70%2525")).Color("#0D4190").Y(-20).Chain()
  .Overlay(new TextLayer().FontFamily("Audiowide").FontSize(20).Text("Profile%20completeness")).Color("#0D4190").Y(25).Chain()
  .Overlay(new Layer().PublicId("badge")).Width(30).Gravity("north_west").X(10).Y(10)).BuildImageTag("black_bar.png")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525")).color("#0D4190").y(-20).chain()
  .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness")).color("#0D4190").y(25).chain()
  .overlay(new Layer().publicId("badge")).width(30).gravity("north_west").x(10).y(10)).generate("black_bar.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(300).setHeight(10).setEffect("colorize").setColor("white").setBorder("1px_solid_black").setCrop("scale").chain()
  .setOverlay("black_bar").setWidth(0.7).setHeight(1.0).setEffect("colorize").setColor("#0D4190").setFlags("relative").setGravity("west").setCrop("scale").chain()
  .setRadius(3).chain()
  .setUnderlay("black_bar").setWidth(400).setHeight(100).setEffect("colorize").setColor("#E9E8E8").setCrop("scale").chain()
  .setOverlay("text:Audiowide_20:70%2525").setColor("#0D4190").setY(-20).chain()
  .setOverlay("text:Audiowide_20:Profile%20completeness").setColor("#0D4190").setY(25).chain()
  .setOverlay("badge").setWidth(30).setGravity("north_west").setX(10).setY(10)).generate("black_bar.png")!, cloudinary: cloudinary)

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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

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=>{:font_family=>"Audiowide", :font_size=>20, :text=>"70%2525"}, :color=>"#0D4190", :y=>-20},
  {:overlay=>{:font_family=>"Audiowide", :font_size=>20, :text=>"Profile%20completeness"}, :color=>"#0D4190", :y=>25},
  {:overlay=>"badge", :width=>30, :gravity=>"north_west", :x=>10, :y=>10},
  {:radius=>20},
  {:effect=>"shadow"}
  ])

PHP v1:

cl_image_tag("black_bar.png", array("transformation"=>array(
  array("width"=>300, "height"=>10, "effect"=>"colorize", "color"=>"white", "border"=>"1px_solid_black", "crop"=>"scale"),
  array("overlay"=>"black_bar", "width"=>"0.7", "height"=>"1.0", "effect"=>"colorize", "color"=>"#0D4190", "flags"=>"relative", "gravity"=>"west", "crop"=>"scale"),
  array("radius"=>3),
  array("underlay"=>"black_bar", "width"=>400, "height"=>100, "effect"=>"colorize", "color"=>"#E9E8E8", "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Audiowide", "font_size"=>20, "text"=>"70%2525"), "color"=>"#0D4190", "y"=>-20),
  array("overlay"=>array("font_family"=>"Audiowide", "font_size"=>20, "text"=>"Profile%20completeness"), "color"=>"#0D4190", "y"=>25),
  array("overlay"=>"badge", "width"=>30, "gravity"=>"north_west", "x"=>10, "y"=>10),
  array("radius"=>20),
  array("effect"=>"shadow")
  )))

PHP v2:

(new ImageTag('black_bar.png'))
  ->border(Border::solid(1, Color::BLACK))
  ->resize(Resize::scale()->width(300)->height(10))
  ->effect(Effect::colorize()->color(Color::WHITE))
  ->overlay(
      Overlay::source(Source::image('black_bar')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(0.7)->height(1.0)->relative())
          ->effect(Effect::colorize()->color(Color::rgb('0D4190')))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::west()))))
    ->roundCorners(RoundCorners::byRadius(3))
    ->underlay(
        Underlay::source(Source::image('black_bar')
          ->transformation((new ImageTransformation())
            ->resize(Resize::scale()->width(400)->height(100))
            ->effect(Effect::colorize()->color(Color::rgb('E9E8E8'))))))
          ->overlay(
              Overlay::source(Source::text('70%25', (new TextStyle('Audiowide', 20)))
                ->textColor(Color::rgb('0D4190')))
              ->position((new Position())
                ->offsetY(-20)))
            ->overlay(
                Overlay::source(Source::text('Profile completeness', (new TextStyle('Audiowide', 20)))
                  ->textColor(Color::rgb('0D4190')))
                ->position((new Position())
                  ->offsetY(25)))
                  ->overlay(
                      Overlay::source(Source::image('badge')
                        ->transformation((new ImageTransformation())
                          ->resize(Resize::scale()->width(30))))
                      ->position((new Position())
                        ->gravity(Gravity::compass(Compass::northWest()))
                        ->offsetX(10)->offsetY(10)))
                    ->roundCorners(RoundCorners::byRadius(20))
                    ->effect(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': {'font_family': "Audiowide", 'font_size': 20, 'text': "70%2525"}, 'color': "#0D4190", 'y': -20},
  {'overlay': {'font_family': "Audiowide", 'font_size': 20, 'text': "Profile%20completeness"}, 'color': "#0D4190", 'y': 25},
  {'overlay': "badge", 'width': 30, 'gravity': "north_west", 'x': 10, 'y': 10},
  {'radius': 20},
  {'effect': "shadow"}
  ])

Node.js:

cloudinary.image("black_bar.png", {transformation: [
  {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"},
  {overlay: "black_bar", width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 3},
  {underlay: "black_bar", width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"},
  {overlay: {font_family: "Audiowide", font_size: 20, text: "70%2525"}, color: "#0D4190", y: -20},
  {overlay: {font_family: "Audiowide", font_size: 20, text: "Profile%20completeness"}, color: "#0D4190", y: 25},
  {overlay: "badge", width: 30, gravity: "north_west", x: 10, y: 10},
  {radius: 20},
  {effect: "shadow"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525")).color("#0D4190").y(-20).chain()
  .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness")).color("#0D4190").y(25).chain()
  .overlay(new Layer().publicId("badge")).width(30).gravity("north_west").x(10).y(10).chain()
  .radius(20).chain()
  .effect("shadow")).imageTag("black_bar.png");

JS:

cloudinary.imageTag('black_bar.png', {transformation: [
  {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 3},
  {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525"), color: "#0D4190", y: -20},
  {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness"), color: "#0D4190", y: 25},
  {overlay: new cloudinary.Layer().publicId("badge"), width: 30, gravity: "north_west", x: 10, y: 10},
  {radius: 20},
  {effect: "shadow"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("black_bar.png", {transformation: [
  {width: 300, height: 10, effect: "colorize", color: "white", border: "1px_solid_black", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.7", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 3},
  {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525"), color: "#0D4190", y: -20},
  {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness"), color: "#0D4190", y: 25},
  {overlay: new cloudinary.Layer().publicId("badge"), width: 30, gravity: "north_west", x: 10, y: 10},
  {radius: 20},
  {effect: "shadow"}
  ]})

React:

<Image publicId="black_bar.png" >
  <Transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <Transformation overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <Transformation radius="3" />
  <Transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" />
  <Transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "70%2525"}} color="#0D4190" y="-20" />
  <Transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "Profile%20completeness"}} color="#0D4190" y="25" />
  <Transformation overlay="badge" width="30" gravity="north_west" x="10" y="10" />
  <Transformation radius="20" />
  <Transformation effect="shadow" />
</Image>

Vue.js:

<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="10" effect="colorize" color="white" border="1px_solid_black" crop="scale" />
  <cld-transformation :overlay="black_bar" width="0.7" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <cld-transformation radius="3" />
  <cld-transformation :underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Audiowide', fontSize: 20, text: '70%2525'}" color="#0D4190" y="-20" />
  <cld-transformation :overlay="{fontFamily: 'Audiowide', fontSize: 20, text: 'Profile%20completeness'}" color="#0D4190" y="25" />
  <cld-transformation :overlay="badge" width="30" gravity="north_west" x="10" y="10" />
  <cld-transformation radius="20" />
  <cld-transformation effect="shadow" />
</cld-image>

Angular:

<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(new Layer().PublicId("black_bar")).Width(0.7).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain()
  .Radius(3).Chain()
  .Underlay(new Layer().PublicId("black_bar")).Width(400).Height(100).Effect("colorize").Color("#E9E8E8").Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Audiowide").FontSize(20).Text("70%2525")).Color("#0D4190").Y(-20).Chain()
  .Overlay(new TextLayer().FontFamily("Audiowide").FontSize(20).Text("Profile%20completeness")).Color("#0D4190").Y(25).Chain()
  .Overlay(new Layer().PublicId("badge")).Width(30).Gravity("north_west").X(10).Y(10).Chain()
  .Radius(20).Chain()
  .Effect("shadow")).BuildImageTag("black_bar.png")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(300).height(10).effect("colorize").color("white").border("1px_solid_black").crop("scale").chain()
  .overlay(new Layer().publicId("black_bar")).width(0.7).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(3).chain()
  .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("70%2525")).color("#0D4190").y(-20).chain()
  .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("Profile%20completeness")).color("#0D4190").y(25).chain()
  .overlay(new Layer().publicId("badge")).width(30).gravity("north_west").x(10).y(10).chain()
  .radius(20).chain()
  .effect("shadow")).generate("black_bar.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(300).setHeight(10).setEffect("colorize").setColor("white").setBorder("1px_solid_black").setCrop("scale").chain()
  .setOverlay("black_bar").setWidth(0.7).setHeight(1.0).setEffect("colorize").setColor("#0D4190").setFlags("relative").setGravity("west").setCrop("scale").chain()
  .setRadius(3).chain()
  .setUnderlay("black_bar").setWidth(400).setHeight(100).setEffect("colorize").setColor("#E9E8E8").setCrop("scale").chain()
  .setOverlay("text:Audiowide_20:70%2525").setColor("#0D4190").setY(-20).chain()
  .setOverlay("text:Audiowide_20:Profile%20completeness").setColor("#0D4190").setY(25).chain()
  .setOverlay("badge").setWidth(30).setGravity("north_west").setX(10).setY(10).chain()
  .setRadius(20).chain()
  .setEffect("shadow")).generate("black_bar.png")!, cloudinary: cloudinary)

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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

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=>{:font_family=>"Audiowide", :font_size=>20, :text=>"50%2525"}, :color=>"white", :opacity=>70},
  {:overlay=>"facebook:billclinton.png", :width=>40, :height=>40, :radius=>"max", :gravity=>"north_west", :x=>7, :y=>7},
  {:radius=>20},
  {:effect=>"shadow"}
  ])

PHP v1:

cl_image_tag("black_bar.png", array("transformation"=>array(
  array("width"=>300, "height"=>40, "effect"=>"colorize", "color"=>"#949494", "crop"=>"scale"),
  array("overlay"=>"black_bar", "width"=>"0.5", "height"=>"1.0", "effect"=>"colorize", "color"=>"#0D4190", "flags"=>"relative", "gravity"=>"west", "crop"=>"scale"),
  array("radius"=>10),
  array("underlay"=>"black_bar", "width"=>400, "height"=>100, "effect"=>"colorize", "color"=>"#E9E8E8", "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Audiowide", "font_size"=>20, "text"=>"50%2525"), "color"=>"white", "opacity"=>70),
  array("overlay"=>"facebook:billclinton.png", "width"=>40, "height"=>40, "radius"=>"max", "gravity"=>"north_west", "x"=>7, "y"=>7),
  array("radius"=>20),
  array("effect"=>"shadow")
  )))

PHP v2:

(new ImageTag('black_bar.png'))
  ->resize(Resize::scale()->width(300)->height(40))
  ->effect(Effect::colorize()->color(Color::rgb('949494')))
  ->overlay(
      Overlay::source(Source::image('black_bar')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(0.5)->height(1.0)->relative())
          ->effect(Effect::colorize()->color(Color::rgb('0D4190')))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::west()))))
    ->roundCorners(RoundCorners::byRadius(10))
    ->underlay(
        Underlay::source(Source::image('black_bar')
          ->transformation((new ImageTransformation())
            ->resize(Resize::scale()->width(400)->height(100))
            ->effect(Effect::colorize()->color(Color::rgb('E9E8E8'))))))
          ->overlay(
              Overlay::source(Source::text('50%25', (new TextStyle('Audiowide', 20)))
                ->textColor(Color::WHITE)
                ->transformation((new ImageTransformation())
                  ->adjust(Adjust::opacity(70)))))
            ->overlay(
                Overlay::source(Source::image('facebook/billclinton')
                  ->format(Format::png())
                  ->transformation((new ImageTransformation())
                    ->resize(Resize::scale()->width(40)->height(40))
                    ->roundCorners(RoundCorners::max())))
                ->position((new Position())
                  ->gravity(Gravity::compass(Compass::northWest()))
                  ->offsetX(7)->offsetY(7)))
                  ->roundCorners(RoundCorners::byRadius(20))
                  ->effect(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': {'font_family': "Audiowide", 'font_size': 20, 'text': "50%2525"}, 'color': "white", 'opacity': 70},
  {'overlay': "facebook:billclinton.png", 'width': 40, 'height': 40, 'radius': "max", 'gravity': "north_west", 'x': 7, 'y': 7},
  {'radius': 20},
  {'effect': "shadow"}
  ])

Node.js:

cloudinary.image("black_bar.png", {transformation: [
  {width: 300, height: 40, effect: "colorize", color: "#949494", crop: "scale"},
  {overlay: "black_bar", width: "0.5", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 10},
  {underlay: "black_bar", width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"},
  {overlay: {font_family: "Audiowide", font_size: 20, text: "50%2525"}, color: "white", opacity: 70},
  {overlay: "facebook:billclinton.png", width: 40, height: 40, radius: "max", gravity: "north_west", x: 7, y: 7},
  {radius: 20},
  {effect: "shadow"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(300).height(40).effect("colorize").color("#949494").crop("scale").chain()
  .overlay(new Layer().publicId("black_bar")).width(0.5).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(10).chain()
  .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("50%2525")).color("white").opacity(70).chain()
  .overlay(new Layer().publicId("facebook:billclinton.png")).width(40).height(40).radius("max").gravity("north_west").x(7).y(7).chain()
  .radius(20).chain()
  .effect("shadow")).imageTag("black_bar.png");

JS:

cloudinary.imageTag('black_bar.png', {transformation: [
  {width: 300, height: 40, effect: "colorize", color: "#949494", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.5", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 10},
  {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("50%2525"), color: "white", opacity: 70},
  {overlay: new cloudinary.Layer().publicId("facebook:billclinton.png"), width: 40, height: 40, radius: "max", gravity: "north_west", x: 7, y: 7},
  {radius: 20},
  {effect: "shadow"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("black_bar.png", {transformation: [
  {width: 300, height: 40, effect: "colorize", color: "#949494", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("black_bar"), width: "0.5", height: "1.0", effect: "colorize", color: "#0D4190", flags: "relative", gravity: "west", crop: "scale"},
  {radius: 10},
  {underlay: new cloudinary.Layer().publicId("black_bar"), width: 400, height: 100, effect: "colorize", color: "#E9E8E8", crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Audiowide").fontSize(20).text("50%2525"), color: "white", opacity: 70},
  {overlay: new cloudinary.Layer().publicId("facebook:billclinton.png"), width: 40, height: 40, radius: "max", gravity: "north_west", x: 7, y: 7},
  {radius: 20},
  {effect: "shadow"}
  ]})

React:

<Image publicId="black_bar.png" >
  <Transformation width="300" height="40" effect="colorize" color="#949494" crop="scale" />
  <Transformation overlay="black_bar" width="0.5" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <Transformation radius="10" />
  <Transformation underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" />
  <Transformation overlay={{fontFamily: "Audiowide", fontSize: 20, text: "50%2525"}} color="white" opacity="70" />
  <Transformation overlay="facebook:billclinton.png" width="40" height="40" radius="max" gravity="north_west" x="7" y="7" />
  <Transformation radius="20" />
  <Transformation effect="shadow" />
</Image>

Vue.js:

<cld-image publicId="black_bar.png" >
  <cld-transformation width="300" height="40" effect="colorize" color="#949494" crop="scale" />
  <cld-transformation :overlay="black_bar" width="0.5" height="1.0" effect="colorize" color="#0D4190" flags="relative" gravity="west" crop="scale" />
  <cld-transformation radius="10" />
  <cld-transformation :underlay="black_bar" width="400" height="100" effect="colorize" color="#E9E8E8" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Audiowide', fontSize: 20, text: '50%2525'}" color="white" opacity="70" />
  <cld-transformation :overlay="facebook:billclinton.png" width="40" height="40" radius="max" gravity="north_west" x="7" y="7" />
  <cld-transformation radius="20" />
  <cld-transformation effect="shadow" />
</cld-image>

Angular:

<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(new Layer().PublicId("black_bar")).Width(0.5).Height(1.0).Effect("colorize").Color("#0D4190").Flags("relative").Gravity("west").Crop("scale").Chain()
  .Radius(10).Chain()
  .Underlay(new Layer().PublicId("black_bar")).Width(400).Height(100).Effect("colorize").Color("#E9E8E8").Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Audiowide").FontSize(20).Text("50%2525")).Color("white").Opacity(70).Chain()
  .Overlay(new Layer().PublicId("facebook:billclinton.png")).Width(40).Height(40).Radius("max").Gravity("north_west").X(7).Y(7).Chain()
  .Radius(20).Chain()
  .Effect("shadow")).BuildImageTag("black_bar.png")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(300).height(40).effect("colorize").color("#949494").crop("scale").chain()
  .overlay(new Layer().publicId("black_bar")).width(0.5).height(1.0).effect("colorize").color("#0D4190").flags("relative").gravity("west").crop("scale").chain()
  .radius(10).chain()
  .underlay(new Layer().publicId("black_bar")).width(400).height(100).effect("colorize").color("#E9E8E8").crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Audiowide").fontSize(20).text("50%2525")).color("white").opacity(70).chain()
  .overlay(new Layer().publicId("facebook:billclinton.png")).width(40).height(40).radius("max").gravity("north_west").x(7).y(7).chain()
  .radius(20).chain()
  .effect("shadow")).generate("black_bar.png");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(300).setHeight(40).setEffect("colorize").setColor("#949494").setCrop("scale").chain()
  .setOverlay("black_bar").setWidth(0.5).setHeight(1.0).setEffect("colorize").setColor("#0D4190").setFlags("relative").setGravity("west").setCrop("scale").chain()
  .setRadius(10).chain()
  .setUnderlay("black_bar").setWidth(400).setHeight(100).setEffect("colorize").setColor("#E9E8E8").setCrop("scale").chain()
  .setOverlay("text:Audiowide_20:50%2525").setColor("white").setOpacity(70).chain()
  .setOverlay("facebook:billclinton.png").setWidth(40).setHeight(40).setRadius("max").setGravity("north_west").setX(7).setY(7).chain()
  .setRadius(20).chain()
  .setEffect("shadow")).generate("black_bar.png")!, cloudinary: cloudinary)

Lastly, an avatar progress bar:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

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=>{:font_family=>"Playball", :font_size=>40, :text=>"60%2525"}, :color=>"white", :y=>80},
  {:width=>200, :crop=>"scale"}
  ])

PHP v1:

cl_image_tag("avatar.jpg", array("transformation"=>array(
  array("effect"=>"trim"),
  array("effect"=>"colorize", "color"=>"white"),
  array("background"=>"#D0CDCD"),
  array("overlay"=>"avatar", "effect"=>"trim", "width"=>"1.0", "height"=>"0.6", "gravity"=>"south", "crop"=>"crop"),
  array("flags"=>"layer_apply", "gravity"=>"south"),
  array("overlay"=>array("font_family"=>"Playball", "font_size"=>40, "text"=>"60%2525"), "color"=>"white", "y"=>80),
  array("width"=>200, "crop"=>"scale")
  )))

PHP v2:

(new ImageTag('avatar.jpg'))
  ->reshape(Reshape::trim())
  ->effect(Effect::colorize()->color(Color::WHITE))
  ->backgroundColor(Color::rgb('D0CDCD'))
  ->overlay(
      Overlay::source(Source::image('avatar')
        ->transformation((new ImageTransformation())
          ->reshape(Reshape::trim())
          ->resize(Resize::crop()->width(1.0)->height(0.6)->gravity(Gravity::compass(Compass::south())))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::south()))))
    ->overlay(
        Overlay::source(Source::text('60%25', (new TextStyle('Playball', 40)))
          ->textColor(Color::WHITE))
        ->position((new Position())
          ->offsetY(80)))
          ->resize(Resize::scale()->width(200));

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': {'font_family': "Playball", 'font_size': 40, 'text': "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: {font_family: "Playball", font_size: 40, text: "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(new Layer().publicId("avatar")).effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain()
  .flags("layer_apply").gravity("south").chain()
  .overlay(new TextLayer().fontFamily("Playball").fontSize(40).text("60%2525")).color("white").y(80).chain()
  .width(200).crop("scale")).imageTag("avatar.jpg");

JS:

cloudinary.imageTag('avatar.jpg', {transformation: [
  {effect: "trim"},
  {effect: "colorize", color: "white"},
  {background: "#D0CDCD"},
  {overlay: new cloudinary.Layer().publicId("avatar"), effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"},
  {flags: "layer_apply", gravity: "south"},
  {overlay: new cloudinary.TextLayer().fontFamily("Playball").fontSize(40).text("60%2525"), color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("avatar.jpg", {transformation: [
  {effect: "trim"},
  {effect: "colorize", color: "white"},
  {background: "#D0CDCD"},
  {overlay: new cloudinary.Layer().publicId("avatar"), effect: "trim", width: "1.0", height: "0.6", gravity: "south", crop: "crop"},
  {flags: "layer_apply", gravity: "south"},
  {overlay: new cloudinary.TextLayer().fontFamily("Playball").fontSize(40).text("60%2525"), color: "white", y: 80},
  {width: 200, crop: "scale"}
  ]})

React:

<Image publicId="avatar.jpg" >
  <Transformation effect="trim" />
  <Transformation effect="colorize" color="white" />
  <Transformation background="#D0CDCD" />
  <Transformation overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop" />
  <Transformation flags="layer_apply" gravity="south" />
  <Transformation overlay={{fontFamily: "Playball", fontSize: 40, text: "60%2525"}} color="white" y="80" />
  <Transformation width="200" crop="scale" />
</Image>

Vue.js:

<cld-image publicId="avatar.jpg" >
  <cld-transformation effect="trim" />
  <cld-transformation effect="colorize" color="white" />
  <cld-transformation background="#D0CDCD" />
  <cld-transformation :overlay="avatar" effect="trim" width="1.0" height="0.6" gravity="south" crop="crop" />
  <cld-transformation flags="layer_apply" gravity="south" />
  <cld-transformation :overlay="{fontFamily: 'Playball', fontSize: 40, text: '60%2525'}" color="white" y="80" />
  <cld-transformation width="200" crop="scale" />
</cld-image>

Angular:

<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(new Layer().PublicId("avatar")).Effect("trim").Width(1.0).Height(0.6).Gravity("south").Crop("crop").Chain()
  .Flags("layer_apply").Gravity("south").Chain()
  .Overlay(new TextLayer().FontFamily("Playball").FontSize(40).Text("60%2525")).Color("white").Y(80).Chain()
  .Width(200).Crop("scale")).BuildImageTag("avatar.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .effect("trim").chain()
  .effect("colorize").color("white").chain()
  .background("#D0CDCD").chain()
  .overlay(new Layer().publicId("avatar")).effect("trim").width(1.0).height(0.6).gravity("south").crop("crop").chain()
  .flags("layer_apply").gravity("south").chain()
  .overlay(new TextLayer().fontFamily("Playball").fontSize(40).text("60%2525")).color("white").y(80).chain()
  .width(200).crop("scale")).generate("avatar.jpg");

iOS:

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)