ds
Components
Meter and bars

Meter and bars

Proportions and small bar charts.

Meter

Rust

62%

Python

21%

SQL

11%

Disk

93%

Code

<div class="meter-row"><span>Rust</span><div class="meter" style="--v:.62"><i></i></div><span>62%</span></div>
<div class="meter-row"><span>Python</span><div class="meter" style="--v:.21"><i></i></div><span>21%</span></div>
<div class="meter-row"><span>SQL</span><div class="meter warm" style="--v:.11"><i></i></div><span>11%</span></div>
<div class="meter-row"><span>Disk</span><div class="meter down" style="--v:.93"><i></i></div><span>93%</span></div>

Set the value with --v between 0 and 1. Changes animate over --dur-slow.

Code

<div class="meter indeterminate" role="progressbar" aria-label="Loading"><i></i></div>

Bars

0006121823

Show code

<div class="bars" role="img" aria-label="Commits by hour, peak at 14:00">
  <i style="--v:0.20"></i>
  <i style="--v:0.33"></i>
  <i style="--v:0.27"></i>
  <i style="--v:0.53"></i>
  <i style="--v:0.80"></i>
  <i style="--v:0.60"></i>
  <i style="--v:0.40"></i>
  <i style="--v:0.73"></i>
  <i style="--v:0.93"></i>
  <i style="--v:0.67"></i>
  <i style="--v:0.47"></i>
  <i style="--v:0.87"></i>
  <i style="--v:1.00"></i>
  <i style="--v:0.80"></i>
  <i style="--v:0.60"></i>
  <i style="--v:0.33"></i>
  <i style="--v:0.27"></i>
  <i style="--v:0.40"></i>
  <i style="--v:0.53" class="p"></i>
  <i style="--v:0.67" class="p"></i>
  <i style="--v:0.47" class="p"></i>
  <i style="--v:0.27" class="p"></i>
  <i style="--v:0.13" class="p"></i>
  <i style="--v:0.07" class="p"></i>
</div>
<div class="axis"><span>00</span><span>06</span><span>12</span><span>18</span><span>23</span></div>

For small, glanceable charts: bars are divs with a height from --v, so there is no charting library. Hover dims the others. For anything you need to read exact values from, add a table.

Class	On	What it does
`.meter`	div	Track. The inner <i> is the fill. Modifiers: warm, ok, warn, down, lg, indeterminate.
`--v`	.meter, .bars > i	Value from 0 to 1.
`.meter-row`	div	Label, meter, value.
`.bars`	div	Column chart. Children are <i> bars; .p for the second series.
`.axis`	div	Mono tick labels under a chart.

Accessibility

Give a meter role="meter" with aria-valuenow, or keep the visible percentage next to it as here.
A bar chart is one image to a screen reader: role="img" and a label that says the takeaway.