Progress

Determinate loading bar on semantic <progress>, with <meter> for value-zone gauges.

INSTALL

1pnpm dlx @sayagodev/mo add progress

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/progress.css";

EXAMPLES

Progress

1<progress value="66" max="100"></progress>2

With label

Upload progress 56%

1<div class="vstack gap-2 w-100">2  <div class="flex items-center justify-between gap-2">3    <label for="progress-label-upload">Upload progress</label>4    <span class="text-light">56%</span>5  </div>6  <progress id="progress-label-upload" value="56" max="100"></progress>7</div>8

Controlled

1<div class="vstack gap-4 w-100">2  <progress value="50" max="100" aria-label="Upload progress"></progress>3  <input type="range" min="0" max="100" step="1" value="50" aria-label="Adjust progress value" oninput="this.closest('div').querySelector('progress').value=this.value" />4</div>5

USAGE

1<progress value="66" max="100"></progress>2 3<meter value="0.65"></meter>

API

NAMEKINDDESCRIPTION

progresselementSemantic progress bar; value/max drive the fill

meterelementGauge with success/warning/danger zones by value

--bar-heighttokenBar height (default 0.5rem)

FILES

src/css/progress.css

Install:mo add progress

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--primary--radius--success--warning

Preview

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.