Phase Bar, a jQuery plugin.
Show specified phases in 1 horizontal bar, and each phase spot has its own status.
Demo is in package.
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fcss%2Fjquery.blade-phasebar.css">
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fdependency%2Fjquery-1.9.1.min.js"></script>
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fjs%2Fjquery.blade-phasebar.js"></script>
<script type="text/javascript">
$(function() {
$('selector').bladePhaseBar();
// or $('selector').bladePhaseBar({option});
}
</script>
{
phaseSpacing: 100, //length between 2 phases, unit: px, default: 100
lineHeight: 2, //height of connected line between 2 phases, unit: px
spotWitdth: 20, //width of phase spot, unit: px, default: 20
spotHeight: 20, //height of phase spot, unit: px, default: 20
colorUndo: 'lightgrey', //color for 'undo' spot, default: 'lightgrey'
colorDone: 'orange', //color for 'done' spot, default: 'orange'
colorDoing: 'lightgreen', //color for 'doing' spot, default: 'lightgreen'
colorFail: 'red' //color for 'fail' spot, default: 'red'
}
/*for element type*/
hr.line
/*for status*/
hr.line-undo
hr.line-done
/*for element type*/
div.spot
/*for status*/
div.spot-undo
div.spot-done
div.spot-doing
div.spot-fail
/*for shape, need CSS3 supported*/
div.spot-rounded
div.spot-capsule
div.spot-ellipse
<html>
<head>
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fcss%2Fjquery.blade-phasebar.css">
</head>
<body>
<div style="border:1px solid;padding:5px;">
<div id="example1" class="phasebar">
<hr class="line line-undo">
<hr class="line line-done" rate="1">
<div class="phase">
<div class="spot spot-done">1</div>
<div class="name">xxxx</div>
</div>
<div class="phase">
<div class="spot spot-rounded spot-done">2</div>
<div class="name">yyyy</div>
</div>
<div class="phase">
<div class="spot spot-capsule spot-undo">3</div>
<div class="name">zzzz</div>
</div>
</div>
</div>
</body>
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fdependency%2Fjquery-1.9.1.min.js"></script>
<script src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fjs%2Fjquery.blade-phasebar.js"></script>
<script type="text/javascript">
$(function() {
$('div#example1.phasebar').bladePhaseBar();
});
</script>
</html>