Package Exports

loading-request
loading-request/dist/index.cjs.js
loading-request/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (loading-request) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Loading Request

Un paquete para mostrar indicadores de carga durante solicitudes o procesos en aplicaciones web. Ideal para mostrar un spinner o indicador de carga al hacer una solicitud a una API REST, enviar un formulario, navegar entre páginas o secciones de un menú, y otros casos similares. Compatible con varios frameworks como React, Vue, Angular, Svelte, Next, JavaScript y más.

Demo

Instalación

$ npm install loading-request --save
$ yarn add loading-request

Caracteristicas

Fácil de usar: Implementa indicadores de carga fácilmente en tu aplicación web con solo unas pocas líneas de código.
Compatible con múltiples frameworks: Funciona sin problemas con frameworks populares como React, Vue, Angular, y Svelte.
Personalización flexible: Permite personalizar el color del spinner y del texto del mensaje de carga según las necesidades del usuario.
Integración rápida: Instalación simple a través de npm o yarn, listo para usar en minutos.
Funcionalidad asincrónica: Soporta operaciones asíncronas como carga de datos, envío de formularios, y navegación entre páginas.
Animaciones suaves: Utiliza animaciones CSS para proporcionar una experiencia de usuario fluida.
Ligero y eficiente: Diseñado para tener un impacto mínimo en el rendimiento de la aplicación.
Documentación clara y detallada: Incluye ejemplos prácticos y documentación completa para facilitar la implementación y configuración.
Actualizaciones regulares: Mantenido activamente con mejoras y actualizaciones periódicas.
Licencia abierta: Publicado bajo licencia ISC, permitiendo su uso en proyectos comerciales y personales sin restricciones.

Ejemplo Práctico en React.js

import { showLoading, hideLoading } from "loading-request";
import "loading-request/dist/index.cjs.css";

const App = () => {
  const handleShowLoading = () => {
    showLoading({
      message: "Cargando...",
      spinnerColor: "#ff0000",
      textLoadingColor: "#222",
    });

    hideLoading({ timeLoading: 1500 });
  };

  return <button onClick={handleShowLoading}>Mostrar Loading</button>;
};

export default App;

API

showLoading(options?: ShowLoadingOptions)

Es una función donde todos sus métodos son opcionales. Entre ellos tenemos:

options:
- message: Mensaje que se muestra junto al indicador de carga. Por defecto es "Cargando...".
- spinnerColor: Color opcional del borde del spinner. Si se proporciona, se aplica dinámicamente.
- textLoadingColor: Color opcional del texto del mensaje de carga. Si se proporciona, se aplica dinámicamente.

hideLoading(options?: HideLoadingOptions)

Es una función que solo puede recibir un objeto de configuración opcional. Oculta el indicador de carga después de un tiempo especificado.

options:
- timeLoading: Tiempo en milisegundos antes de ocultar el indicador. Por defecto es 500ms.

Contribuir

Si encuentras algún problema o tienes una idea para mejorar el paquete, por favor abre un issue o envía un pull request en GitHub: https://github.com/urian121/loading-request

License

Licensed under MIT

Desarrollado por

Da las gracias aquí 🤓