Components
Step Loader
A named-steps progress list with a loader beside the running step, a track that fills as steps finish, and an expandable list of every step.
A step loader shows an agent's work as named steps. The step running now sits beside a small
loader; a track below fills as steps finish; and the row expands to the full list, each line
switching to its done text once complete. When current reaches the number of steps, every step
is done and the row shows the doneLabel.
Preview
- Reading Figma frames
- Generating components
- Writing tests
- Running the suite
Radar
Dots
Ring
Bars
Usage
<!-- include core.css + step-loader.css -->
<div class="stl dm">
<button class="stl-row" aria-expanded="false">
<span class="stl-g"></span>
<span class="stl-t"><span class="stl-lab shim">Reading Figma frames</span></span>
<span class="stl-n num">1/4</span>
<svg class="i xs stl-chev"><use href="#i-chev-d" /></svg>
</button>
<div class="stl-track"><i></i><i></i><i></i><i></i></div>
<div class="fold shut stl-fold"><div><ol class="stl-list"></ol></div></div>
</div>Properties
| Name | Type | Description |
|---|---|---|
steps | { label: string; done?: string }[] | The steps. label shows while running, done once finished (falls back to label). |
current | number | Index of the step running now. steps.length or more means every step is done. |
loader | radar | dots | ring | bars | The loader glyph beside the running step. radar by default. |
doneLabel | string | Label once every step is done. Ready for review by default. |
open / defaultOpen | boolean | Whether the full list is open. Leave open out to let the row toggle it. |
onOpenChange | callback | Fires when the row opens or closes the list. |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The
track and loader take the accent color from the active theme; in Soft the row and track are softer
and more rounded than in Blueprint.