LayoutUI
Theme Presets
Browse Components

Progress

Compact, labeled bars with native meters.

Theme color

The selected accent fills each bar. A neutral track shows the shared scale.

Example weekly signups
Mon
42 of 100
42
Tue
68 of 100
68
Wed
55 of 100
55
Thu
91 of 100
91
View Code
HTML
<figure class="stack">
  <figcaption>
    Example weekly signups
  </figcaption>
  <dl class="bar-chart">
    <div>
      <dt>
        Mon
      </dt>
      <dd>
        <meter min="0" max="100" value="42" aria-label="Mon: 42 signups">
          42 of 100
        </meter>
      </dd>
      <dd>
        42
      </dd>
    </div>
    <div>
      <dt>
        Tue
      </dt>
      <dd>
        <meter min="0" max="100" value="68" aria-label="Tue: 68 signups">
          68 of 100
        </meter>
      </dd>
      <dd>
        68
      </dd>
    </div>
    <div>
      <dt>
        Wed
      </dt>
      <dd>
        <meter min="0" max="100" value="55" aria-label="Wed: 55 signups">
          55 of 100
        </meter>
      </dd>
      <dd>
        55
      </dd>
    </div>
    <div>
      <dt>
        Thu
      </dt>
      <dd>
        <meter min="0" max="100" value="91" aria-label="Thu: 91 signups">
          91 of 100
        </meter>
      </dd>
      <dd>
        91
      </dd>
    </div>
  </dl>
</figure>

Status colors

Use color to reinforce visible status labels, never as the only way to tell them apart.

Review progress
Approved
80%
80%
Pending
45%
45%
Blocked
15%
15%
View Code
HTML
<figure class="stack">
  <figcaption>
    Review progress
  </figcaption>
  <dl class="bar-chart">
    <div style="--bar-color:#26845b">
      <dt>
        Approved
      </dt>
      <dd>
        <meter min="0" max="100" value="80" aria-label="Approved: 80 percent">
          80%
        </meter>
      </dd>
      <dd>
        80%
      </dd>
    </div>
    <div style="--bar-color:#b98118">
      <dt>
        Pending
      </dt>
      <dd>
        <meter min="0" max="100" value="45" aria-label="Pending: 45 percent">
          45%
        </meter>
      </dd>
      <dd>
        45%
      </dd>
    </div>
    <div style="--bar-color:#c44859">
      <dt>
        Blocked
      </dt>
      <dd>
        <meter min="0" max="100" value="15" aria-label="Blocked: 15 percent">
          15%
        </meter>
      </dd>
      <dd>
        15%
      </dd>
    </div>
  </dl>
</figure>

Category colors

Set --bar-color on each row for distinct categories. Keep labels and a common scale.

Storage by team
Design
70%
70%
Product
55%
55%
Support
35%
35%
View Code
HTML
<figure class="stack">
  <figcaption>
    Storage by team
  </figcaption>
  <dl class="bar-chart">
    <div style="--bar-color:var(--accent)">
      <dt>
        Design
      </dt>
      <dd>
        <meter min="0" max="100" value="70" aria-label="Design: 70 percent">
          70%
        </meter>
      </dd>
      <dd>
        70%
      </dd>
    </div>
    <div style="--bar-color:color-mix(in srgb,var(--accent) 65%,var(--ink))">
      <dt>
        Product
      </dt>
      <dd>
        <meter min="0" max="100" value="55" aria-label="Product: 55 percent">
          55%
        </meter>
      </dd>
      <dd>
        55%
      </dd>
    </div>
    <div style="--bar-color:var(--muted)">
      <dt>
        Support
      </dt>
      <dd>
        <meter min="0" max="100" value="35" aria-label="Support: 35 percent">
          35%
        </meter>
      </dd>
      <dd>
        35%
      </dd>
    </div>
  </dl>
</figure>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.csschart.css
Add to your page
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/chart.css">

8,988 bytes CSS including base · 0 bytes runtime JavaScript

Usage

Choose a fill

Bars use the theme accent by default. Set --bar-color on the chart or a row for another color. Keep visible labels and values; color must not carry meaning alone.

Show a small comparison

Use these bars for a small set of nonnegative values. Give every meter the same maximum.

Keep values readable

Show a label and number for each bar, with an accessible name. This is a compact summary, not a full charting engine.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.