Progress bars
Indicate known task completion as a percentage.
Live preview
Files processed68%
HTML
<div class="xsh-stack" style="width:100%;max-width:480px">
<div class="xsh-row" style="justify-content:space-between">
<strong style="font-size:12px">Files processed</strong>
<span class="xsh-muted xsh-small">68%</span>
</div>
<div class="xsh-progress" role="progressbar" aria-label="Files processed" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100">
<div class="xsh-progress__bar" style="--xsh-progress:68%">
</div>
</div>
<div class="xsh-progress xsh-progress--success" role="progressbar" aria-label="Upload completed" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="xsh-progress__bar" style="--xsh-progress:100%">
</div>
</div>
</div>Installation & markup
Include the local stylesheet and script once on the page, then place the component inside a data-xsh-ui root. The example above works without a build system.
<link rel="stylesheet" href="/dist/xshna-ui.css">
<div data-xsh-ui>
<!-- Add the HTML example above -->
</div>
<script defer src="/dist/xshna-ui.js"></script>Component API
Public classes, attributes and hooks used by this example. Keep the xsh- prefix intact.
| Identifier | Contract |
|---|---|
xsh-progress | Used by the example markup and component styles or behavior. |
xsh-progress__bar | Used by the example markup and component styles or behavior. |
--xsh-progress | Used by the example markup and component styles or behavior. |
aria-valuenow | Used by the example markup and component styles or behavior. |
Accessibility & keyboard
Expose aria-valuenow, aria-valuemin, aria-valuemax and an accessible label. Update values as the task changes.
Implementation note. Use an indeterminate status indicator if progress cannot be estimated accurately.
Interaction contract
Behavioral components use the shared delegated runtime; visual-only primitives rely on semantic HTML and CSS. Runtime controls emit bubbling xsh:* CustomEvents; bind application handlers to those events when server persistence, API data or navigation is required.