xprogressbar
v0.1.2
Published
a better meter tag with values for (done, todo, budget) and color
Downloads
7
Readme
xprogressbar web component
Copyright 2015 LOGILAB S.A. (Paris, FRANCE), All rights reserved. Contact: http://www.logilab.fr/ -- mailto contact at logilab dot fr License: LGPL -- https://www.gnu.org/licenses/lgpl
ProgressBar displays a progress bar with:
- work done (done, colored),
- work before completion (todo, grey),
- work originaly planned (budget, a black line).
The width and height of the bar can be set via attributes and default to 100/16.
The color of the bar is determined by comparing done+todo and budget:
if done+todo >= 1.1 * budget then fatal (red)
elif done+todo >= 1.05 * budget then danger (orange)
elif done+todo > 1. * budget then warning (yellow)
elif done+todo >= 0.95 * budget then info (lightgreen)
else ok (green)The label above the bar is "done / budget = percent +overshoot" with overshoot = done+todo-budget. The font size of the label can be styled with the --font-size css variable.
Example of use:
<html>
<head>
<script src="webcomponents.js"></script>
<link rel="import" href="xprogressbar.html"/>
<style>
.xprogressbar {
--font-size: .5em;
}
</style>
</head>
<body>
<x-progressbar data-done="50" data-todo="40"
data-budget="100" data-width="100"
data-height="20"></x-progressbar>
</body>
</html>To build, type npm update then make.