0.1.2 • Published 9 years ago
xprogressbar v0.1.2
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>To build, type npm update then make.