Meter

How full something is. With tone auto, a limit turns amber from 75 % and red from 90 %.

  • kit.meter()
  • 164 B of CSS · 3 rules
  • kit-data.css
  • No script needed

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.meter({ value: 62, max: 100, label: 'Storage', text: '6.2 of 10 GB' })
    + kit.meter({ value: 93, max: 100, label: 'Uploads today', text: '93 of 100', tone: 'auto' });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<link rel="stylesheet" href="https://openvibe.network/shared/kit-data.css">
<script src="https://openvibe.network/shared/kit.js"></script>
<script src="https://openvibe.network/shared/kit-web.js" defer></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.meter({ value: 62, max: 100, label: 'Storage', text: '6.2 of 10 GB' })
      + OpenVibeKit.meter({ value: 93, max: 100, label: 'Uploads today', text: '93 of 100', tone: 'auto' });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 384 B
<span class="ovk-meter" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="62" aria-label="Storage" aria-valuetext="6.2 of 10 GB"><span style="--v:0.620"></span></span><span class="ovk-meter ovk-meter--bad" role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="93" aria-label="Uploads today" aria-valuetext="93 of 100"><span style="--v:0.930"></span></span>

What it weighs

Its own rules are 348 B, 164 B as sent: 1% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.