Spinner

Component spinner tải để hiển thị trạng thái đang tải hoặc xử lý.

Cài đặt

npm

npx @galaxy-stack/nebula-cli@latest add spinner

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add spinner

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add spinner

bun

bunx @galaxy-stack/nebula-cli@latest add spinner

global

# Nếu bạn đã cài đặt galaxy-design toàn cục
galaxy-design add spinner

Dependencies

Component này tự động cài đặt các dependencies sau:

• React: class-variance-authority
• Vue: class-variance-authority
• Angular: class-variance-authority
• React Native: nativewind, tailwindcss
• Flutter: Không cần thêm dependencies

Không cần cài đặt thủ công!

Sử dụng

Ví dụ cơ bản

React

import { Spinner } from "@/components/ui/spinner"

export default function SpinnerDemo() {
  return <Spinner />
}

Vue

<script setup lang="ts">
import { Spinner } from '@/components/ui/spinner'
</script>

<template>
  <Spinner />
</template>

Các kích thước

React

import { Spinner } from "@/components/ui/spinner"

export default function SpinnerSizes() {
  return (
    <div className="flex gap-4 items-center">
      <Spinner size="sm" />
      <Spinner size="default" />
      <Spinner size="lg" />
    </div>
  )
}

Vue

<script setup lang="ts">
import { Spinner } from '@/components/ui/spinner'
</script>

<template>
  <div class="flex gap-4 items-center">
    <Spinner size="sm" />
    <Spinner size="default" />
    <Spinner size="lg" />
  </div>
</template>

Với văn bản

React

import { Spinner } from "@/components/ui/spinner"

export default function SpinnerWithText() {
  return (
    <div className="flex items-center gap-2">
      <Spinner />
      <span>Đang tải...</span>
    </div>
  )
}

Vue

<script setup lang="ts">
import { Spinner } from '@/components/ui/spinner'
</script>

<template>
  <div class="flex items-center gap-2">
    <Spinner />
    <span>Đang tải...</span>
  </div>
</template>

API Reference

Props

Prop	Type	Default	Description	Framework Support
size	`'sm'	'default'	'lg'`	'default'
className / class	string	''	Tên class CSS	Tất cả
ariaLabel	string	'Loading...'	Label dễ tiếp cận	Tất cả

Accessibility

• Screen Reader: Sử dụng role="status" và aria-label cho trạng thái tải
• Focus Management: Không nhận focus (decorative)
• WCAG Compliance: Tuân thủ WCAG 2.1 Level AA

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)