@etus/ui 0.1.0

package/src/components/primitives/Spinner/README.md

@@ -0,0 +1,767 @@
+# Spinner
+
+## Visão Geral
+
+O **Spinner** é o componente de indicador de carregamento do Design System ETUS, usado para comunicar ao usuário que uma operação está em andamento. Como elemento atômico, é utilizado em composições como botões com estado de loading, overlays de carregamento e skeleton screens.
+
+### Casos de Uso
+
+- Indicar carregamento de dados (fetch, API calls)
+- Estado de loading em botões durante submissão
+- Carregamento de conteúdo lazy-loaded
+- Processamento de formulários
+- Transições de página
+- Upload/download de arquivos
+
+### Classificação
+
+**Categoria:** Atom (Primitive)
+**Dependências:** `lucide-react` (Loader2Icon)
+
+---
+
+## Design Specs
+
+### Implementação Base
+
+O Spinner utiliza o ícone `Loader2Icon` do Lucide com animação CSS `animate-spin`.
+
+```tsx
+<Loader2Icon className="size-4 animate-spin" />
+```
+
+### Tamanhos Recomendados
+
+| Tamanho | Classes | Dimensão | Uso |
+|---------|---------|----------|-----|
+| `xs` | `size-3` | 12px | Inline em texto, badges |
+| `sm` | `size-4` | 16px | **Padrão**, botões pequenos |
+| `md` | `size-5` | 20px | Botões default |
+| `lg` | `size-6` | 24px | Cards, seções |
+| `xl` | `size-8` | 32px | Páginas, modais |
+| `2xl` | `size-12` | 48px | Full-page loaders |
+
+### Estados Visuais
+
+| Estado | Comportamento |
+|--------|---------------|
+| Default | Rotação contínua em 360° |
+| Reduced Motion | Animação pausada ou opacity pulse |
+
+### Tokens Utilizados
+
+```css
+/* Animação */
+animate-spin          /* animation: spin 1s linear infinite */
+
+/* Tamanhos */
+size-4                /* 16px - padrão */
+
+/* Cores (herdadas) */
+currentColor          /* Herda cor do elemento pai */
+text-muted-foreground /* Cor comum para spinners */
+text-primary          /* Ênfase */
+
+/* Duração da animação */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+```
+
+### Velocidades de Animação
+
+| Velocidade | Classes | Duração | Uso |
+|------------|---------|---------|-----|
+| Lenta | `animate-spin [animation-duration:1.5s]` | 1.5s | Operações longas |
+| Normal | `animate-spin` | 1s | **Padrão** |
+| Rápida | `animate-spin [animation-duration:0.5s]` | 0.5s | Feedback imediato |
+
+---
+
+## API
+
+### Props
+
+| Prop | Tipo | Padrão | Descrição |
+|------|------|--------|-----------|
+| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"sm"` | Tamanho do spinner |
+| `color` | `"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "error" \| "current"` | `"current"` | Cor do spinner |
+| `className` | `string` | - | Classes CSS adicionais |
+| `aria-label` | `string` | `"Loading"` | Label para screen readers |
+| `role` | `string` | `"status"` | Role ARIA do elemento |
+
+> Herda todas as props de `React.ComponentProps<"svg">`
+
+### TypeScript
+
+```typescript
+import type { SpinnerProps, SpinnerSize, SpinnerColor } from "@etus/ui"
+
+// Tipos exportados
+type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl"
+type SpinnerColor = "default" | "primary" | "secondary" | "success" | "warning" | "error" | "current"
+
+// Props do componente
+interface SpinnerProps extends React.ComponentProps<"svg"> {
+  size?: SpinnerSize
+  color?: SpinnerColor
+}
+```
+
+### Comparativo com Design Systems de Referência
+
+#### Matriz de Features (14 Design Systems)
+
+| Feature | ETUS | Shadcn | Radix | Chakra | MUI | Mantine | AntD | NextUI | Headless | Ariakit | Fluent | Carbon | Blueprint | PrimeReact |
+|---------|:----:|:------:|:-----:|:------:|:---:|:-------:|:----:|:------:|:--------:|:-------:|:------:|:------:|:---------:|:----------:|
+| **Componente dedicado** | ✓ | - | - | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | ✓ | ✓ |
+| **size prop** | ✓ | - | - | ✓ | ✓ | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | ✓ | - |
+| **color prop** | ✓ | - | - | ✓ | ✓ | ✓ | - | ✓ | - | - | ✓ | - | ✓ | - |
+| **thickness prop** | - | - | - | ✓ | ✓ | ✓ | - | - | - | - | - | - | - | - |
+| **speed prop** | - | - | - | ✓ | - | - | - | - | - | - | - | - | - | - |
+| **label prop** | - | - | - | ✓ | - | ✓ | ✓ | ✓ | - | - | ✓ | ✓ | - | - |
+| **Variantes visuais** | - | - | - | - | ✓ | - | - | ✓ | - | - | ✓ | ✓ | - | - |
+| **Determinado/Indeterminado** | - | - | - | - | ✓ | - | ✓ | - | - | - | ✓ | ✓ | ✓ | ✓ |
+| **aria-label built-in** | ✓ | - | - | ✓ | ✓ | ✓ | - | ✓ | - | - | ✓ | ✓ | - | - |
+| **role="status"** | ✓ | - | - | ✓ | - | ✓ | - | - | - | - | ✓ | ✓ | - | - |
+| **Reduced motion** | - | - | - | ✓ | ✓ | ✓ | - | ✓ | - | - | ✓ | ✓ | - | - |
+
+#### Comparativo de Implementações
+
+| Design System | Implementação | Customização |
+|---------------|---------------|--------------|
+| **ETUS** | Ícone SVG (Lucide) | Via className |
+| **Chakra UI** | SVG com circle animado | Props: size, color, thickness, speed |
+| **MUI** | CircularProgress | Props: size, color, variant |
+| **Mantine** | SVG loader | Props: size, color, type |
+| **Ant Design** | SVG spinning | Props: size, tip, indicator |
+| **NextUI** | SVG customizado | Props: size, color, label |
+| **Fluent UI** | SVG com animação | Props: size, label, appearance |
+| **Carbon** | Loading component | Props: small, withOverlay, description |
+| **Blueprint** | Spinner component | Props: size, intent, value |
+
+#### Tipos de Spinners por Design System
+
+| Design System | Tipos Disponíveis |
+|---------------|-------------------|
+| **ETUS** | Circle (Loader2) |
+| **Chakra UI** | Spinner (circle) |
+| **MUI** | Circular, Linear |
+| **Mantine** | Oval, Bars, Dots |
+| **Ant Design** | Default, Custom indicator |
+| **NextUI** | Default, Gradient |
+| **Fluent UI** | Spinner, ProgressBar |
+| **Carbon** | Small, Default, Overlay |
+| **Blueprint** | Spinner (determinate/indeterminate) |
+| **PrimeReact** | ProgressSpinner |
+
+---
+
+## Acessibilidade (A11y)
+
+### ARIA Attributes
+
+| Atributo | Valor | Uso |
+|----------|-------|-----|
+| `role` | `"status"` | Indica região de status dinâmico |
+| `aria-label` | `"Loading"` | Label descritivo para screen readers |
+| `aria-live` | `"polite"` | Anúncio não-intrusivo (opcional) |
+| `aria-busy` | `"true"` | Indica conteúdo em carregamento (no container) |
+
+### Implementação Atual
+
+```tsx
+<Loader2Icon
+  role="status"
+  aria-label="Loading"
+  className="size-4 animate-spin"
+/>
+```
+
+### Boas Práticas
+
+```tsx
+// 1. Container com aria-busy
+<div aria-busy={isLoading}>
+  {isLoading ? <Spinner /> : <Content />}
+</div>
+
+// 2. Label personalizado
+<Spinner aria-label="Carregando dados do usuário" />
+
+// 3. Com texto visível (hidden para SR)
+<div className="flex items-center gap-2">
+  <Spinner aria-hidden="true" />
+  <span>Carregando...</span>
+</div>
+
+// 4. Live region para anúncios
+<div role="status" aria-live="polite">
+  {isLoading && <Spinner />}
+  {isLoading && <span className="sr-only">Carregando...</span>}
+</div>
+```
+
+### Reduced Motion
+
+```tsx
+// CSS para respeitar preferência do usuário
+@media (prefers-reduced-motion: reduce) {
+  .animate-spin {
+    animation: none;
+    /* Alternativa: opacity pulse */
+    animation: pulse 2s ease-in-out infinite;
+  }
+}
+
+// Ou inline via className
+<Spinner className="motion-reduce:animate-none motion-reduce:opacity-70" />
+```
+
+### Contraste de Cores
+
+O Spinner herda `currentColor` do elemento pai, garantindo contraste adequado quando usado com cores semânticas do design system.
+
+| Contexto | Classe | Contraste |
+|----------|--------|-----------|
+| Texto principal | `text-foreground` | >= 4.5:1 |
+| Texto secundário | `text-muted-foreground` | >= 4.5:1 |
+| Sobre primária | `text-primary-foreground` | >= 4.5:1 |
+| Destrutivo | `text-destructive` | >= 4.5:1 |
+
+### Comparativo A11y (14 Design Systems)
+
+| Feature | ETUS | React Aria | Radix | Ariakit | Headless | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon | Blueprint | PrimeReact |
+|---------|:----:|:----------:|:-----:|:-------:|:--------:|:------:|:---:|:-------:|:----:|:------:|:------:|:------:|:---------:|:----------:|
+| **role="status"** | ✓ | ✓ | - | ✓ | - | ✓ | - | ✓ | - | - | ✓ | ✓ | - | - |
+| **aria-label** | ✓ | ✓ | - | ✓ | - | ✓ | ✓ | ✓ | - | ✓ | ✓ | ✓ | - | - |
+| **aria-live** | - | ✓ | - | ✓ | - | - | - | - | - | - | ✓ | ✓ | - | - |
+| **Reduced motion** | - | ✓ | - | - | - | ✓ | ✓ | ✓ | - | ✓ | ✓ | ✓ | - | - |
+| **aria-valuenow** | - | ✓ | - | - | - | - | ✓ | - | - | - | ✓ | ✓ | ✓ | ✓ |
+| **aria-valuetext** | - | ✓ | - | - | - | - | ✓ | - | - | - | ✓ | ✓ | - | - |
+| **Focus management** | - | ✓ | - | ✓ | - | - | - | - | - | - | ✓ | ✓ | - | - |
+
+**Legenda:** ✓ = Suporte completo | - = Não suportado
+
+---
+
+## Exemplos
+
+### Uso Básico
+
+```tsx
+import { Spinner } from "@etus/ui"
+
+function Example() {
+  return <Spinner />
+}
+```
+
+### Tamanhos (via prop)
+
+```tsx
+<Spinner size="xs" />  {/* 12px */}
+<Spinner size="sm" />  {/* 16px (padrão) */}
+<Spinner size="md" />  {/* 20px */}
+<Spinner size="lg" />  {/* 24px */}
+<Spinner size="xl" />  {/* 32px */}
+```
+
+### Cores (via prop)
+
+```tsx
+// Cor padrão (herda do pai)
+<Spinner color="current" />
+
+// Cores semânticas
+<Spinner color="default" />   {/* text-muted-foreground */}
+<Spinner color="primary" />   {/* text-primary */}
+<Spinner color="secondary" /> {/* text-secondary-foreground */}
+<Spinner color="success" />   {/* text-success */}
+<Spinner color="warning" />   {/* text-warning */}
+<Spinner color="error" />     {/* text-destructive */}
+```
+
+### Combinações
+
+```tsx
+// Grande e primário
+<Spinner size="lg" color="primary" />
+
+// Pequeno e erro
+<Spinner size="xs" color="error" />
+```
+
+### Em Botão com Loading
+
+```tsx
+import { Button } from "@etus/ui"
+import { Spinner } from "@etus/ui"
+
+function SubmitButton({ isLoading }: { isLoading: boolean }) {
+  return (
+    <Button disabled={isLoading}>
+      {isLoading && <Spinner className="text-current" />}
+      {isLoading ? "Salvando..." : "Salvar"}
+    </Button>
+  )
+}
+```
+
+### Centralizado em Container
+
+```tsx
+function LoadingCard() {
+  return (
+    <div className="flex h-48 items-center justify-center rounded-lg border">
+      <Spinner className="size-8 text-muted-foreground" />
+    </div>
+  )
+}
+```
+
+### Full Page Loading
+
+```tsx
+function PageLoader() {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
+      <div className="flex flex-col items-center gap-4">
+        <Spinner className="size-12 text-primary" />
+        <p className="text-sm text-muted-foreground">Carregando...</p>
+      </div>
+    </div>
+  )
+}
+```
+
+### Inline com Texto
+
+```tsx
+function InlineLoading() {
+  return (
+    <p className="flex items-center gap-2 text-sm text-muted-foreground">
+      <Spinner className="size-3" aria-hidden="true" />
+      Processando pagamento...
+    </p>
+  )
+}
+```
+
+### Condicional com Suspense
+
+```tsx
+import { Suspense } from "react"
+
+function DataLoader() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex justify-center p-8">
+          <Spinner className="size-6" />
+        </div>
+      }
+    >
+      <AsyncComponent />
+    </Suspense>
+  )
+}
+```
+
+### Com Skeleton
+
+```tsx
+function SkeletonWithSpinner() {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3">
+        <Spinner className="size-5" />
+        <span className="text-sm">Carregando dados...</span>
+      </div>
+      <div className="h-4 w-3/4 animate-pulse rounded bg-muted" />
+      <div className="h-4 w-1/2 animate-pulse rounded bg-muted" />
+    </div>
+  )
+}
+```
+
+### Velocidade Customizada
+
+```tsx
+// Lento (operações longas)
+<Spinner className="[animation-duration:1.5s]" />
+
+// Rápido (feedback imediato)
+<Spinner className="[animation-duration:0.5s]" />
+```
+
+### Acessibilidade Completa
+
+```tsx
+function AccessibleLoader({ label = "Carregando" }: { label?: string }) {
+  return (
+    <div role="status" aria-live="polite" className="flex items-center gap-2">
+      <Spinner aria-hidden="true" />
+      <span className="sr-only">{label}</span>
+    </div>
+  )
+}
+```
+
+### Com Container aria-busy
+
+```tsx
+function DataTable({ isLoading, data }) {
+  return (
+    <div aria-busy={isLoading} aria-describedby="loading-status">
+      {isLoading && (
+        <div id="loading-status" className="flex justify-center p-4">
+          <Spinner />
+          <span className="sr-only">Carregando tabela de dados</span>
+        </div>
+      )}
+      {!isLoading && <Table data={data} />}
+    </div>
+  )
+}
+```
+
+---
+
+## Testes
+
+### Testes Unitários
+
+```tsx
+// Spinner.test.tsx
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import { Spinner } from "./Spinner"
+
+describe("Spinner", () => {
+  it("renders correctly", () => {
+    render(<Spinner />)
+    expect(screen.getByRole("status")).toBeInTheDocument()
+  })
+
+  it("has correct aria-label", () => {
+    render(<Spinner />)
+    expect(screen.getByLabelText("Loading")).toBeInTheDocument()
+  })
+
+  it("applies default classes", () => {
+    render(<Spinner data-testid="spinner" />)
+    const spinner = screen.getByTestId("spinner")
+    expect(spinner).toHaveClass("size-4", "animate-spin")
+  })
+
+  it("merges custom className", () => {
+    render(<Spinner className="size-8 text-primary" data-testid="spinner" />)
+    const spinner = screen.getByTestId("spinner")
+    expect(spinner).toHaveClass("size-8", "text-primary", "animate-spin")
+  })
+
+  it("allows custom aria-label", () => {
+    render(<Spinner aria-label="Processando dados" />)
+    expect(screen.getByLabelText("Processando dados")).toBeInTheDocument()
+  })
+
+  it("is an SVG element", () => {
+    render(<Spinner data-testid="spinner" />)
+    const spinner = screen.getByTestId("spinner")
+    expect(spinner.tagName).toBe("svg")
+  })
+})
+```
+
+### Testes de Acessibilidade
+
+```tsx
+import { axe, toHaveNoViolations } from "jest-axe"
+
+expect.extend(toHaveNoViolations)
+
+describe("Spinner accessibility", () => {
+  it("has no accessibility violations", async () => {
+    const { container } = render(<Spinner />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has role status", () => {
+    render(<Spinner />)
+    expect(screen.getByRole("status")).toBeInTheDocument()
+  })
+
+  it("is announced to screen readers", () => {
+    render(<Spinner aria-label="Carregando conteúdo" />)
+    expect(screen.getByRole("status")).toHaveAccessibleName("Carregando conteúdo")
+  })
+
+  it("works with aria-hidden when text is visible", async () => {
+    const { container } = render(
+      <div className="flex items-center gap-2">
+        <Spinner aria-hidden="true" />
+        <span>Carregando...</span>
+      </div>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})
+```
+
+### Testes de Integração (com Button)
+
+```tsx
+describe("Spinner in Button", () => {
+  it("renders inside button with loading state", () => {
+    render(
+      <Button disabled>
+        <Spinner data-testid="spinner" />
+        Salvando...
+      </Button>
+    )
+
+    expect(screen.getByRole("button")).toBeDisabled()
+    expect(screen.getByTestId("spinner")).toBeInTheDocument()
+  })
+
+  it("spinner inherits button text color", () => {
+    render(
+      <Button className="text-white">
+        <Spinner className="text-current" data-testid="spinner" />
+        Loading
+      </Button>
+    )
+
+    expect(screen.getByTestId("spinner")).toHaveClass("text-current")
+  })
+})
+```
+
+### Testes Visuais (Storybook)
+
+```tsx
+// Spinner.stories.tsx
+import type { Meta, StoryObj } from "@storybook/react"
+import { Spinner } from "./Spinner"
+
+const meta: Meta<typeof Spinner> = {
+  component: Spinner,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Spinner>
+
+export const Default: Story = {}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Spinner className="size-3" />
+      <Spinner className="size-4" />
+      <Spinner className="size-6" />
+      <Spinner className="size-8" />
+      <Spinner className="size-12" />
+    </div>
+  ),
+}
+
+export const Colors: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Spinner className="text-primary" />
+      <Spinner className="text-muted-foreground" />
+      <Spinner className="text-destructive" />
+      <Spinner className="text-emerald-500" />
+    </div>
+  ),
+}
+
+export const InButton: Story = {
+  render: () => (
+    <Button disabled>
+      <Spinner />
+      Carregando...
+    </Button>
+  ),
+}
+```
+
+### Cenários Críticos
+
+```tsx
+describe("Spinner edge cases", () => {
+  it("handles multiple spinners on page", () => {
+    render(
+      <>
+        <Spinner data-testid="spinner-1" />
+        <Spinner data-testid="spinner-2" />
+        <Spinner data-testid="spinner-3" />
+      </>
+    )
+
+    expect(screen.getAllByRole("status")).toHaveLength(3)
+  })
+
+  it("respects additional SVG props", () => {
+    render(
+      <Spinner
+        data-testid="spinner"
+        strokeWidth={3}
+        onClick={() => {}}
+      />
+    )
+
+    expect(screen.getByTestId("spinner")).toHaveAttribute("stroke-width", "3")
+  })
+
+  it("works in SSR context", () => {
+    // Spinner não depende de window/document
+    const { container } = render(<Spinner />)
+    expect(container.querySelector("svg")).toBeInTheDocument()
+  })
+})
+```
+
+---
+
+## Roadmap / Features Futuras
+
+Baseado na análise comparativa com 14 design systems:
+
+### ✅ Implementado
+
+#### Variantes CVA
+
+Props `size` e `color` para controle via CVA.
+
+```tsx
+// Tamanhos disponíveis
+<Spinner size="xs" />  {/* 12px */}
+<Spinner size="sm" />  {/* 16px (padrão) */}
+<Spinner size="md" />  {/* 20px */}
+<Spinner size="lg" />  {/* 24px */}
+<Spinner size="xl" />  {/* 32px */}
+
+// Cores disponíveis
+<Spinner color="default" />   {/* text-muted-foreground */}
+<Spinner color="primary" />   {/* text-primary */}
+<Spinner color="secondary" /> {/* text-secondary-foreground */}
+<Spinner color="success" />   {/* text-success */}
+<Spinner color="warning" />   {/* text-warning */}
+<Spinner color="error" />     {/* text-destructive */}
+<Spinner color="current" />   {/* text-current (padrão) */}
+```
+
+**Referências:** Chakra, MUI, Mantine, NextUI
+
+### Prioridade Média
+
+#### `label` prop
+
+Texto descritivo para contexto.
+
+```tsx
+interface SpinnerProps {
+  label?: string
+  showLabel?: boolean
+}
+
+// Uso
+<Spinner label="Carregando dados" showLabel />
+```
+
+**Referências:** Chakra, Mantine, AntD (tip), Fluent UI, Carbon
+
+#### Reduced Motion Automático
+
+```tsx
+// Detectar preferência e ajustar animação
+const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)")
+
+<Spinner className={prefersReducedMotion ? "animate-pulse" : "animate-spin"} />
+```
+
+**Referências:** Chakra, MUI, Mantine, NextUI, Fluent UI, Carbon
+
+### Prioridade Baixa
+
+#### Variantes Visuais
+
+Diferentes estilos de spinner.
+
+```tsx
+interface SpinnerProps {
+  variant?: "circle" | "dots" | "bars" | "pulse"
+}
+
+// Uso
+<Spinner variant="dots" />
+```
+
+**Referências:** Mantine (Loader types), MUI (CircularProgress, LinearProgress)
+
+#### Spinner Determinado
+
+Progress com valor definido.
+
+```tsx
+interface SpinnerProps {
+  value?: number // 0-100
+  indeterminate?: boolean
+}
+
+// Uso
+<Spinner value={75} />
+```
+
+**Referências:** MUI, AntD, Fluent UI, Carbon, Blueprint
+
+### Decisões de Design
+
+| Feature | Recomendação | Justificativa |
+|---------|--------------|---------------|
+| `size` prop | ✅ Implementar | Ergonomia, evita className |
+| `color` prop | ✅ Implementar | Consistência com outros componentes |
+| `label` prop | ⚠️ Avaliar | className + texto visível funciona |
+| Reduced motion | ✅ Implementar | A11y importante |
+| Variantes visuais | ❌ Evitar | Manter simplicidade |
+| Determinado | ❌ Criar componente separado | Progress != Spinner |
+
+---
+
+## Referências
+
+### Design Systems Analisados
+
+| Design System | Documentação Spinner | GitHub |
+|---------------|---------------------|--------|
+| **Shadcn/ui** | Não tem dedicado (usa Lucide) | [shadcn-ui/ui](https://github.com/shadcn-ui/ui) |
+| **Chakra UI** | [Spinner](https://chakra-ui.com/docs/components/spinner) | [chakra-ui/chakra-ui](https://github.com/chakra-ui/chakra-ui) |
+| **MUI** | [CircularProgress](https://mui.com/material-ui/react-circular-progress/) | [mui/material-ui](https://github.com/mui/material-ui) |
+| **Mantine** | [Loader](https://mantine.dev/core/loader/) | [mantinedev/mantine](https://github.com/mantinedev/mantine) |
+| **Ant Design** | [Spin](https://ant.design/components/spin) | [ant-design/ant-design](https://github.com/ant-design/ant-design) |
+| **NextUI** | [Spinner](https://nextui.org/docs/components/spinner) | [nextui-org/nextui](https://github.com/nextui-org/nextui) |
+| **Fluent UI** | [Spinner](https://react.fluentui.dev/?path=/docs/components-spinner--default) | [microsoft/fluentui](https://github.com/microsoft/fluentui) |
+| **Carbon** | [Loading](https://carbondesignsystem.com/components/loading/usage/) | [carbon-design-system/carbon](https://github.com/carbon-design-system/carbon) |
+| **Blueprint** | [Spinner](https://blueprintjs.com/docs/#core/components/spinner) | [palantir/blueprint](https://github.com/palantir/blueprint) |
+| **PrimeReact** | [ProgressSpinner](https://primereact.org/progressspinner/) | [primefaces/primereact](https://github.com/primefaces/primereact) |
+| **React Aria** | [ProgressBar](https://react-spectrum.adobe.com/react-aria/ProgressBar.html) | [adobe/react-spectrum](https://github.com/adobe/react-spectrum) |
+| **Ariakit** | Não tem dedicado | [ariakit/ariakit](https://github.com/ariakit/ariakit) |
+| **Headless UI** | Não tem dedicado | [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui) |
+| **Radix UI** | Não tem dedicado | [radix-ui/primitives](https://github.com/radix-ui/primitives) |
+
+### Especificações e Padrões
+
+- [WAI-ARIA APG - Meter Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/meter/)
+- [MDN - role="status"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role)
+- [WCAG 2.1 - Prefers Reduced Motion](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html)
+- [MDN - prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)
+
+### Ferramentas Utilizadas
+
+- [Lucide Icons - Loader2](https://lucide.dev/icons/loader-2)
+- [Tailwind CSS - animate-spin](https://tailwindcss.com/docs/animation#spin)