Plugin Usage

In order to use the plugin you need to:

  1. include jQuery
  2. include the plugin file (the minified version is just 4kb)
  3. configure the plugin using the JSON options
  4. run the $.mambo([options]) on your canvas

$(".full-features").mambo({
  percentage: 65,
  label: "Cr",
  displayValue: true,
  labelColor: "#ccc",
  circleColor: '#5965E5',
  circleBorder: '#282D66',
  ringStyle: "full",
  ringBackground: "#999EDD",
  ringColor: "#393F90",
  drawShadow: true
});
          

Plugin Options

This is the full list of options/customizations that could be passed to the plugin.

OptionTypeDefaultDescription
percentagefloat100The percentage represented by the badge.
imagestringnoneIf an image path is specified label will not be considered. The image will be scaled to the maximum size that fits the badge.
labelstringnoneThe label show in the badge; due to technical limitations the max length i 3 chars. If neither label and image are not set the badge will show the percentage.
labelColorstring#FFFLet you choose the text color. The color will be applied also to the value if showed.
displayValuebooleantrueIndicates if the value should be displayed or not above the text. If the label is not specified the scripts automatically shows the value.
circleColorfloat#F2AC29The color used to fill the internal circle.
circleBorderfloat#FFFThe color used for the internal circle border.
ringStylestringpercentageIf "percentage" the external ring will be drawn proportionally to the value of the percentage; e.g.: 100% will draw a full circle around the badge, 50% half a circle and so on. If "full" a complete ring is drawn, regardeless of the percentage value.
ringColorstring#F2762EThe color used for the external ring.
ringBackgroundstring#CCCIf you chose to draw a complete ring using ringstyle: "full", the remaining part of the circle will be filled with this color.
drawShadowbooleanfalseDraw a little shadow on the edge of the badge.

Plugin Examples

Take a look at the code for the demos used in the main carousel.

Default

Code


$(".default").mambo({
  percentage: 65
});
              

Only label

Code


$(".only-label").mambo({
  percentage: 37,
  label: "Lbl",
  displayValue: false,
  circleColor: '#C9D94E',
  circleBorder: '#535920',
  ringColor: "#8E9937"
});
              

Label & Value

Code


$(".label-value").mambo({
  percentage: 59,
  label: "Lbl",
  circleColor: '#9136C7',
  ringColor: "#632587"
});
              

Percentage fill

Code


$(".percentage-fill").mambo({
  percentage: 43,
  label: "Pf",
  displayValue: true,
  circleColor: '#7ACAD9',
  ringStyle: "full",
  ringColor: "#7ACAD9",
  drawShadow: true
});
              

Image badge

Code


$(".image-badge").mambo({
  image: "/media/images/Gnome_Monkey.png",
  circleColor: '#F2DEBB',
  circleBorder: '#736959',
  ringColor: "#A69880",
  drawShadow: true
});
              

Color badge

Code


$(".just-badge").mambo({
  displayValue: false,
  label: "",
  circleColor: '#FD92A1',
  circleBorder: '#FD5EBA',
  ringColor: "#F2385A",
  drawShadow: true
});
              

Future improvements

Since I work on this project spending my (little) spare time I have left from work/girlfriend/beer I don't know when this list of features could be available!

Animations
I would like to animate the badge on mouseenter and mouseleave events redrawing the percentage bar using an easing function
Ring size
It would be nice if an option will permit to configure the size of the external ring.
A better text
At the moment the plugin supports labels composed of max 3 chars and doesn't permit to choose the font...I guess this isn't good for the final user so I would like to extend the text options giving it much customizations.

Spread and follow

I'm always looking for feedbacks and suggestions, so if you want to see a feature implemented or simply tell me how to improve this plugin please don't hesitate to contact me!