loading-request/dist/index.js

Loading Request es un paquete npm moderno, intuitivo, liviano y flexible, diseñado para mejorar la experiencia del usuario mostrando indicadores de carga durante solicitudes y procesos asincrónicos en aplicaciones web. Compatible con frameworks populares

"use strict";if("undefined"!=typeof window&&"undefined"!=typeof document){const n=document.createElement("style");n.textContent=".page-loading {\r\n  position: fixed;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  -webkit-transition: all 0.4s 0.2s ease-in-out;\r\n  transition: all 0.4s 0.2s ease-in-out;\r\n  background-color: #fff;\r\n  visibility: hidden;\r\n  z-index: 9999;\r\n}\r\n.page-loading.active {\r\n  opacity: 0.8;\r\n  visibility: visible;\r\n}\r\n.page-loading-inner {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 0;\r\n  width: 100%;\r\n  text-align: center;\r\n  -webkit-transform: translateY(-50%);\r\n  transform: translateY(-50%);\r\n  -webkit-transition: opacity 0.2s ease-in-out;\r\n  transition: opacity 0.2s ease-in-out;\r\n  opacity: 0;\r\n}\r\n.page-loading.active > .page-loading-inner {\r\n  opacity: 1;\r\n}\r\n.page-loading-inner > span {\r\n  display: block;\r\n  font-size: 16px;\r\n  font-weight: bold;\r\n  color: #7366ff;\r\n}\r\n.page-spinner {\r\n  display: inline-block;\r\n  width: 3rem;\r\n  height: 3rem;\r\n  margin-bottom: 0.75rem;\r\n  vertical-align: text-bottom;\r\n  border: 0.15em solid #7366ff;\r\n  border-right-color: transparent;\r\n  border-radius: 50%;\r\n  -webkit-animation: spinner 0.75s linear infinite;\r\n  animation: spinner 0.75s linear infinite;\r\n}\r\n@-webkit-keyframes spinner {\r\n  100% {\r\n    -webkit-transform: rotate(360deg);\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n@keyframes spinner {\r\n  100% {\r\n    -webkit-transform: rotate(360deg);\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n",document.head.appendChild(n)}const n=(n={})=>{const{message:r="Cargando...",spinnerColor:e,textLoadingColor:i,textLoadingSize:t}=n,o=document.createElement("div");o.className="page-loading active";const a=e?`style="border: 0.15em solid ${e}; border-right-color: transparent;"`:"",s=`\n    ${i?`color: ${i} !important;`:""}\n    ${t?`font-size: ${t} !important;`:""}\n  `;o.innerHTML=`\n    <div class="page-loading-inner">\n      <div class="page-spinner" ${a}></div>\n      <span style="${s}">${r}</span>\n    </div>\n  `,document.body.appendChild(o)},r=(n={})=>{const{timeLoading:r=500}=n,e=document.querySelector(".page-loading.active");e&&setTimeout((()=>{var n;null===(n=e.parentElement)||void 0===n||n.removeChild(e),e.classList.remove("active")}),r)};window.loadingRequest={showLoading:n,hideLoading:r},exports.hideLoading=r,exports.showLoading=n;