Kern 0.12.0 GitHub
Feedback

<kern-progress>

Progress of a long operation. With value it shows the share of max (scan, template on N devices); without value it runs as an indeterminate band (firmware update, reboot).

Examples

Determinate and indeterminate

With value the bar shows the share of max; label sits on the left and value-text on the right above the bar. Without value it runs as an indeterminate band for operations of unknown length.

<div style="display:grid;gap:16px;max-width:480px"> <kern-progress label="Scan 192.168.1.0/24" value="148" max="254" value-text="148 / 254"></kern-progress> <kern-progress label="Template on 6 devices" value="50" value-text="3 of 6"></kern-progress> <kern-progress label="Installing firmware …"></kern-progress> </div>

Updating the value

Set value and valueText as the operation advances.

Start scan
<div style="display:grid;gap:12px;max-width:480px"> <kern-progress label="Scan 192.168.1.0/24" value="0" max="254" value-text="0 / 254"></kern-progress> <kern-button class="start" size="sm" style="justify-self:start">Start scan</kern-button> </div> const bar = root.querySelector('kern-progress'); root.querySelector('.start').addEventListener('click', () => { let n = 0; const id = setInterval(() => { n = Math.min(254, n + 17); bar.value = n; bar.valueText = `${n} / 254`; if (n === 254) clearInterval(id); }, 200); });

Properties

label
string | undefined

Text on the left above the bar.

maxdefault 100
number
value
number | undefined
valueTextattribute value-text
string | undefined

Text on the right above the bar, e.g. "148 / 254".

CSS parts

bar

The filled part