jQuery UI Multiprogressbar Plugin Demo

Demo of the jQuery UI Multiprogressbar plugin. http://github.com/j-ulrich/jquery-ui-multiprogressbar

HTML

<script src="http://j-ulrich.github.com/jquery-ui-multiprogressbar/jquery.ui.multiprogressbar.js"></script>
<link rel="stylesheet" href="http://j-ulrich.github.com/jquery-ui-multiprogressbar/jquery.ui.multiprogressbar.css">
<script src="http://j-ulrich.github.com/jquery-ui-multiprogressbar/jquery.outerhtml.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/themes/ui-lightness/jquery-ui.css">
<div id="plain"></div>

CSS

#plain {
    margin: 1em;
    width: 70%;
}
.blue {
			background: blue;
		}
		
		.red {
			background: red;
		}
		.green {
			background: green;
		}
		
		.yellow {
			background: yellow;
		}

JavaScript

$('#plain').multiprogressbar({
		   parts: [
            {value: 59,barClass: "green", text:"dfgdfg"},
           {value: 30,barClass: "yellow", text:"dfgdfg"},
		   {value: 11,barClass: "red"}]
	});