Components / Feedback & Status / Progress

Progress beta

A thin bar that tells the truth: how much is done, in ink or in the one accent.

Preview

Uploading footage68%

Verifying files92%

<div style="display:grid;gap:16px;max-width:420px">
  <div style="display:grid;gap:7px">
    <div style="display:flex;justify-content:space-between;font-size:12.5px"><span style="font-weight:550">Uploading footage</span><span style="font-family:var(--k-mono);color:var(--k-ink-2)">68%</span></div>
    <div class="k-progress" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"><div class="k-progress-bar" style="width:68%"></div></div>
  </div>
  <div style="display:grid;gap:7px">
    <div style="display:flex;justify-content:space-between;font-size:12.5px"><span style="font-weight:550">Verifying files</span><span style="font-family:var(--k-mono);color:var(--k-ink-2)">92%</span></div>
    <div class="k-progress" data-tone="accent" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100"><div class="k-progress-bar" style="width:92%"></div></div>
  </div>
</div>

/* KATA Progress */
.k-progress{height:6px;border-radius:var(--k-radius-full);background:var(--k-track);overflow:hidden}
.k-progress-bar{height:100%;border-radius:var(--k-radius-full);background:var(--k-ink);transition:width .3s cubic-bezier(.3,.7,.3,1)}
.k-progress[data-tone="accent"] .k-progress-bar{background:var(--k-accent)}

Usage

Determinate work only — uploads, exports, steps. The percentage in mono type next to the bar is part of the component, not decoration.

Accessibility

role="progressbar" with aria-valuenow/min/max. Keep the visible percentage in sync with the value.

Meter

Skeleton