Stepper with loading state

<script setup lang="ts">
import { Stepper, StepperContent, StepperIndicator, StepperItem, StepperNav, StepperPanel, StepperSeparator, StepperTrigger } from "@/components/reui/stepper"

const steps = [1, 2, 3]
</script>

<template>
  <Stepper class="w-full max-w-md" :default-value="2">
    <template #indicator-completed>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="size-3.5"
      >
        <path d="M20 6 9 17l-5-5" />
      </svg>
    </template>
    <template #indicator-loading>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="size-3.5 animate-spin"
      >
        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
      </svg>
    </template>

    <StepperNav class="mb-5">
      <StepperItem
        v-for="step in steps"
        :key="step"
        :step="step"
        :loading="step === 2"
      >
        <StepperTrigger>
          <StepperIndicator
            class="data-[state=active]:text-primary-foreground data-[state=active]:bg-primary data-[state=active]:border-primary data-[state=inactive]:border-muted size-5 border-2 data-[state=completed]:border-green-500 data-[state=completed]:bg-green-500 data-[state=completed]:text-white"
          >
            <span
              class="bg-primary-foreground hidden size-1.5 rounded-full group-data-[state=active]/step:block"
            ></span>
          </StepperIndicator>
        </StepperTrigger>
        <StepperSeparator
          v-if="steps.length > step"
          class="group-data-[state=completed]/step:bg-green-500"
        />
      </StepperItem>
    </StepperNav>

    <StepperPanel class="text-sm">
      <StepperContent
        v-for="step in steps"
        :key="step"
        class="flex w-full items-center justify-center"
        :value="step"
      >Step {{ step }} content</StepperContent>
    </StepperPanel>
  </Stepper>
</template>