UI Elements

ProgressTracker

A component that displays the current step in a multi-step process or workflow.

(1)

Step 1
(2)

Step 2
(3)

Step 3

Anatomy

The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.

Svelte

<ol class="whole">
  {#each labels as label}
    <li class="middle">
      <div class="main">
        <div class="aux" conditional>{aux}</div>
        <div class="label">{label} or {children}</div>
      </div>
      <div class="extra" conditional>{extra}</div>
    </li>
  {/each}
</ol>

Props

Type

(value) indicates the default value for the prop.

TypeScript

interface ProgressTrackerProps {
  current: number; // bindable (0)
  labels: string[];
  children?: Snippet<[number, string, string]>; // Snippet<[index,label,variant]>
  aux?: Snippet<[number, string, string]>; // Snippet<[index,label,variant]>
  extra?: boolean | Snippet<[number, string, string]>; // (true) Snippet<[index,label,variant]>
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
  eachVariant?: SvelteMap<number, string> | Map<number, string>;
}

Additional Props

current - Index of the steps currently progressing
eachVariant - Specify a variant for each step

Styling

To learn more, see Styling.

Variant Management

Current step and whole part are applied neutral. Steps less than current step will be active, greater than current will be inactive. If the variant prop is specified, the specified value is applied instead of neutral.

Default Class Name

svs-progress-tracker

Exports

Types

TypeScript

type ProgressTrackerReqdProps = "current" | "labels";
type ProgressTrackerBindProps = "current" | "variant";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

(1)

Step 1
(2)

Step 2
(3)

Step 3

With Interactive Variant

Preset for Demo

Free Input

Enter variant as you like

Step 1

Additional text 1
Step 2

Additional text 2
Step 3

Additional text 3
Step 4

Additional text 4

Svelte

<script lang="ts">
  import { ProgressTracker } from "svseeds";
  import { CircleCheck, Circle, CircleDot } from "@lucide/svelte";

  let { variant = $bindable() } = $props();
  let current = $state(1);
  const labels = [
    { label: "Step 1", text: "Additional text 1" },
    { label: "Step 2", text: "Additional text 2" },
    { label: "Step 3", text: "Additional text 3" },
    { label: "Step 4", text: "Additional text 4" },
  ];
  const styling = {
    whole: {
      base: "h-80 w-50 flex flex-col flex-nowrap border-r-2 [&_div]:transition-colors [&_div]:duration-500",
      neutral: "border-gray-600",
      active: "border-teal-600",
      inactive: "border-red-600",
      blue: "border-blue-600",
      yellow: "border-yellow-600",
      sky: "border-sky-600",
    },
    middle: "flex flex-col",
    main: "flex items-center gap-2",
    aux: {
      base: "text-2xl",
      neutral: "",
      active: "text-teal-600",
      inactive: "text-gray-600"
    },
    label: {
      base: "flex flex-col",
      neutral: "",
      active: "text-teal-600",
      inactive: "text-gray-600"
    },
    extra: {
      base: "my-2 ml-5 h-full w-0.5",
      neutral: "bg-gray-600",
      active: "bg-teal-600",
    }
  };
  const cls = "px-2 rounded-md border text-center cursor-pointer";
</script>

<div>
  <ProgressTracker bind:current labels={labels.map((x) => x.label)} {styling}>
    {#snippet aux(index)}
      {#if index < current}
        <CircleCheck class="size-10 stroke-teal-600" />
      {:else if index > current}
        <Circle class="size-10 stroke-gray-600" />
      {:else}
        <CircleDot class="size-10" />
      {/if}
    {/snippet}
    {#snippet children(index)}
      <div>{labels[index].label}</div>
      <div class="text-sm">{labels[index].text}</div>
    {/snippet}
  </ProgressTracker>

  <div class= "mt-5 w-50 flex justify-around">
    <button type="button" class={cls} onclick={() => current--}>Prev.</button>
    <button type="button" class={cls} onclick={() => current++}>Next</button>
  </div>
</div>