wiki-Loader

Ver en Git

---

Loader

Loader es un componente visual que muestra un indicador de carga circular. Es altamente personalizable a través de diferentes propiedades para adaptarse a las necesidades del diseño.

Referencia de la API

Propiedad	Tipo	Descripción	Opcional	Valores posibles
radius	string	Define el radio del loader.	Sí	Cualquier valor CSS válido, como 32px, 2rem, etc.
color	string	Especifica el color del loader.	Sí	Cualquier valor de color CSS válido, como #000, red, etc.
style	CSSProperties	Estilos CSS adicionales en línea para personalizar el contenedor del loader.	Sí	-
strokeWidth	string	Define el grosor del borde del loader.	Sí	Cualquier valor CSS válido, como 2px, 0.5rem, etc.
aura-test	string	Etiqueta para pruebas automatizadas.	Sí	-

Notas sobre las propiedades

• Si no se proporciona radius, color o strokeWidth, el componente usará los valores predeterminados: 32px, currentColor y 2px respectivamente.
• La propiedad style permite aplicar estilos personalizados al contenedor principal del loader.

Ejemplo de uso

import { Loader } from '@auravant/ui-kit';

<Loader
 radius="48px"
 color="#0D72B9"
 strokeWidth="4px"
 style={{ margin: '20px auto' }}
 aura-test="custom-loader"
/>;

Notas

• El componente utiliza un diseño modular con estilos definidos en loader.module.css.
• Los estilos de animación del loader están definidos por la clase spinner.
• Es posible combinar varias propiedades para crear loaders únicos que se integren con el diseño de la aplicación.