Sivir UI
Studio 64

Task Steps

The system narrates its work one settled step at a time.

Deploy release

  1. Queued
  2. Building
  3. Running checks
  4. Deploying

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add task-steps

Usage

Set current to the running step. Values before it are complete; the array length means the whole run is complete.

import { TaskSteps } from '@sivir-ui/svelte/components/task-steps';

<TaskSteps
  steps={[{ id: 'build', label: 'Building' }, { id: 'test', label: 'Testing' }]}
  current={1}
  label="Deploy progress"
/>

Examples

Task Steps rendered on its own, without card chrome.

Bare

  1. Queued 0.2s
  2. Building 8.1s
  3. Running checks
  4. Deploying

Anatomy

TaskSteps - Narrates ordered asynchronous work.