Spinner
Un componente de spinner para indicar estados de carga con diferentes estilos y animaciones.
Cargando...
import { Spinner } from "stofli-ui";Cargando...
El spinner básico que se muestra como un indicador de carga.
Cargando...
Cargando...
El spinner está disponible en varios tamaños: xs, sm, md, lg y xl.
Cargando...
Cargando...
El spinner está disponible en diferentes variantes de color.
Cargando...
Cargando...
El spinner está disponible en cinco tipos diferentes: border, dots, grow, wave y lines.
Cargando...
Cargando...
El spinner se puede configurar con diferentes velocidades de animación.
Cargando...
Cargando...
El spinner puede incluir una etiqueta de texto en diferentes posiciones.
Cargando...
Cargando...
Puedes combinar diferentes propiedades para personalizar el spinner según tus necesidades.
Cargando...
Cargando...
Puedes personalizar cualquier parte del componente usando la propiedad className con clases de Tailwind CSS.
Cargando...
Cargando...
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Tamaño del spinner |
variant | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "default" | Variante de color del spinner |
speed | "slow" | "normal" | "fast" | "normal" | Velocidad de la animación |
type | "border" | "dots" | "grow" | "wave" | "lines" | "border" | Tipo de animación del spinner |
label | string | - | Texto descriptivo para el spinner |
labelPosition | "left" | "right" | "top" | "bottom" | "right" | Posición del texto respecto al spinner |
ariaLabel | string | - | Etiqueta ARIA personalizada |
ariaLive | "off" | "polite" | "assertive" | "polite" | Prioridad de anuncios de accesibilidad |
className | string | - | Clases adicionales para el componente |
containerClassName | string | - | Clases para el contenedor principal |
spinnerClassName | string | - | Clases para el elemento spinner |
labelClassName | string | - | Clases para el texto de la etiqueta |