TSpinner / 加载圈

Spinner indicates loading or processing state. Supports border/grow animation types, color variants, compact size, and animated dots mode. / 加载圈用于展示异步操作等待状态，支持旋转边框/增长填充两种动画类型、颜色变体、紧凑尺寸和圆点跳动模式。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
type	'border' | 'grow'	'border'	Animation type
color	TablerColor	—	Color (text-*)
sm	boolean	false	Small size
dots	boolean	false	Animated dots (mutually exclusive) / 圆点跳动
label	string	'Loading...'	Screen-reader label

Basic Usage / 基础用法

<script setup lang="ts">
import { TSpinner } from '@gulcc/tabler-vue'
</script>

<template>
  <TSpinner />
  <TSpinner color="primary" />
  <TSpinner color="success" />
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TSpinner } from '@gulcc/tabler-vue'
</script>

<template>
  <!-- Types / 类型 -->
  <TSpinner type="border" />
  <TSpinner type="grow" />

  <!-- Colors / 颜色 -->
  <TSpinner color="blue" />
  <TSpinner color="green" />
  <TSpinner color="red" />
  <TSpinner color="purple" />
  <TSpinner color="orange" />

  <!-- Sizes / 尺寸 -->
  <TSpinner sm />
  <TSpinner />

  <!-- Animated dots (3 bouncing dots) / 圆点跳动 -->
  <TSpinner dots />

  <!-- Inside a button / 在按钮中使用 -->
  <TButton color="primary" :loading="true">
    <TSpinner sm class="me-1" /> Loading / 加载中
  </TButton>
</template>

Tips / 避坑指南

• dots mode is mutually exclusive with type and color — when dots=true, other props are ignored
• sm adds spinner-border-sm or spinner-grow-sm class
• The label prop is used for screen readers (visually-hidden span) — customize for accessibility
• TSpinner is also used internally by TButton when loading=true