Sivir UI
79

Task Steps

The running step shows a spinner, and finished steps show a check. Screen readers hear one sentence per step, such as “Building, step 2 of 4.”, after the step has been current for half a second.

  1. Queued 0.2s
  2. Building 8.1s
  3. Running checks
  4. Deploying 
<script lang="ts">
    import { type TaskStep, TaskSteps } from '@sivir-ui/svelte/components/task-steps';

    const steps: TaskStep[] = [
        { id: 'queue', label: 'Queued', meta: '0.2s' },
        { id: 'build', label: 'Building', meta: '8.1s' },
        { id: 'checks', label: 'Running checks', meta: '3.4s' },
        { id: 'deploy', label: 'Deploying', meta: '5.0s' }
    ];
</script>

<div class="w-full max-w-sm">
    <TaskSteps {steps} current={2} label="Deploy progress" />
</div>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add task-steps

Usage

current is the zero-based index of the running step, and steps before it show as done. Set it to steps.length when every step has finished, or set failed to mark the current step as failed. A step's meta, such as its duration, appears once the step is done.

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

Bare

  1. Installing dependencies 2.3s
  2. Compiling 1.8s
  3. Running tests 4.2s
  4. Building bundle 
<script lang="ts">
    import { type TaskStep, TaskSteps } from '@sivir-ui/svelte/components/task-steps';

    const steps: TaskStep[] = [
        { id: 'install', label: 'Installing dependencies', meta: '2.3s' },
        { id: 'compile', label: 'Compiling', meta: '1.8s' },
        { id: 'test', label: 'Running tests', meta: '4.2s' },
        { id: 'bundle', label: 'Building bundle', meta: '0s' }
    ];
</script>

<div class="w-full max-w-sm">
    <TaskSteps {steps} current={3} failed label="Build failed" />
</div>

Anatomy

TaskSteps - Lists steps as pending, running, done, or failed.