El Loader es un elemento dinámico visual que indica procesos en curso o carga de datos. Comunica al usuario que la carga está en curso y tardará un tiempo indeterminado.
Spinner · Title · Description
Importa estilos base y el componente Loader.
1import 'nave-ui-library/styles.css'2import { Loader } from 'nave-ui-library/react'Uso recomendado para esperas indeterminadas con contexto claro para el usuario.
Variantes de color disponibles para el spinner.
Escalas de spinner disponibles para distintos niveles de jerarquía visual.
Todas las props disponibles para el componente Loader.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'small' | 'medium' | 'large' | 'extraLarge' | medium | Size of the loader. |
variant | 'default' | 'primary' | default | Visual variant of the loader. |
label | ReactNode | — | Label text displayed below the loader animation. |
description | ReactNode | — | Additional descriptive text displayed below the label. |
spinnerClassName | string | — | Additional classes for the spinner icon. |
1{2 "name": "Loader",3 "description": "Loader animado para indicar carga.",4 "component": "Loader",5 "files": [6 "components/base/data-display/system-feedback/Loader.tsx"7 ],8 "dependencies": [9 "react"10 ],11 "props": {12 "size": {13 "type": "'small' | 'medium' | 'large' | 'extraLarge'",14 "default": "medium",15 "description": "Size of the loader."16 },17 "variant": {18 "type": "'default' | 'primary'",19 "default": "default",20 "description": "Visual variant of the loader."21 },22 "label": {23 "type": "ReactNode",24 "description": "Label text displayed below the loader animation."25 },26 "description": {27 "type": "ReactNode",28 "description": "Additional descriptive text displayed below the label."29 },30 "spinnerClassName": {31 "type": "string",32 "description": "Additional classes for the spinner icon."33 }34 },35 "states": {36 "loading": {}37 }38}