xprogressbar

a better meter tag with values for (done, todo, budget) and color

Usage no npm install needed!

<script type="module">
  import xprogressbar from 'https://cdn.skypack.dev/xprogressbar';
</script>

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.