Spinner

Use Spinner for short loading states inside buttons, panels, overlays, or empty-state variants.

Basic Usage

Spinner

Demo will load when visible.

<template>
  <TxSpinner />
</template>

Sizes

Spinner sizes

Demo will load when visible.

<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <TxSpinner :size="12" />
    <TxSpinner :size="16" />
    <TxSpinner :size="24" />
    <TxSpinner :size="32" />
  </div>
</template>

Visibility Toggle (v-if vs visible)

Toggle

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const showByIf = ref(true)
const visible = ref(true)
</script>

<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;">
    <div style="display: flex; flex-direction: column; gap: 10px;">
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <div style="font-weight: 600;">
          v-if (no built-in transition)
        </div>
        <TxButton size="small" @click="showByIf = !showByIf">
          Toggle
        </TxButton>
      </div>
      <div style="display: flex; align-items: center; gap: 10px; height: 28px;">
        <TxSpinner v-if="showByIf" />
        <span style="color: var(--tx-text-color-secondary);">Status: {{ showByIf ? 'mounted' : 'unmounted' }}</span>
      </div>
    </div>

    <div style="display: flex; flex-direction: column; gap: 10px;">
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <div style="font-weight: 600;">
          :visible (built-in transition)
        </div>
        <TxButton size="small" @click="visible = !visible">
          Toggle
        </TxButton>
      </div>
      <div style="display: flex; align-items: center; gap: 10px; height: 28px;">
        <TxSpinner :visible="visible" />
        <span style="color: var(--tx-text-color-secondary);">Status: {{ visible ? 'mounted' : 'unmounted (after leave)' }}</span>
      </div>
    </div>
  </div>
</template>

API

Props

Prop	Type	Default	Description
`size`	`number`	`16`	Spinner width and height in pixels.
`strokeWidth`	`number`	`2`	Stroke width used by the ring and SVG fallback.
`fallback`	`boolean`	`false`	Renders the SVG fallback spinner instead of the default animated shape.
`visible`	`boolean`	`true`	Shows or hides the spinner with the built-in transition.