Skip to content

Spinner

Indica una operación en curso. Para placeholders de layout usa Skeleton; para acciones usa Button loading.

Preview principal

SPINNERmd · 24px
role=status · aria-live=polite

Tamaños

sm 16 · md 24 · lg 36.

SIZE
sm
md
lg

Contexto

Etiqueta, color de trazo y botón en carga.

CONTEXT

etiqueta

color

marca · atenuado · muted

en botón

Uso

Section titled “Uso”
import { Spinner, Button } from "devsoftec-ui";


<Spinner />
<Spinner size="lg" label="Cargando…" />
<Button loading>Guardando</Button>

Props

Section titled “Props”
Prop Tipo Default Descripción
size sm | md | lg md 16 / 24 / 36 px
label string i18n loading Texto visible + aria-label
color string --brand-fg Color del trazo

Comportamiento

Section titled “Comportamiento”
  • role="status" + aria-live="polite"
  • Sin label, el aria-label viene de i18n (loading)
  • Respeta prefers-reduced-motion (sin rotación)