jQuery Mambo

Mambo is a MIT licensed jQuery plugin that let you easily create rounded badges using canvas.

You could use it for creating colorful badges with labels, display percentages or both. It was created because I wanted to avoid the mess of using images made ad-hoc for displaying "percentage badges" and as an excuse to start playing with canvas!

Default

Only label

Label & value

Percentage fill

Image badge

Color badge

‹ ›

Plugin Usage

In order to use the plugin you need to:

include jQuery
include the plugin file (the minified version is just 4kb)
configure the plugin using the JSON options
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.

Option	Type	Default	Description
percentage	float	100	The percentage represented by the badge.
image	string	none	If an image path is specified label will not be considered. The image will be scaled to the maximum size that fits the badge.
label	string	none	The 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.
labelColor	string	#FFF	Let you choose the text color. The color will be applied also to the value if showed.
displayValue	boolean	true	Indicates if the value should be displayed or not above the text. If the label is not specified the scripts automatically shows the value.
circleColor	float	#F2AC29	The color used to fill the internal circle.
circleBorder	float	#FFF	The color used for the internal circle border.
ringStyle	string	percentage	If "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.
ringColor	string	#F2762E	The color used for the external ring.
ringBackground	string	#CCC	If you chose to draw a complete ring using `ringstyle: "full"`, the remaining part of the circle will be filled with this color.
drawShadow	boolean	false	Draw 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!