loading-request
Version:
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
2 lines (1 loc) • 2.71 kB
JavaScript
!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((n="undefined"!=typeof globalThis?globalThis:n||self).loadingRequest={})}(this,(function(n){"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 e=(n={})=>{const{message:e="Cargando...",spinnerColor:r,textLoadingColor:i,textLoadingSize:t}=n,o=document.createElement("div");o.className="page-loading active";const a=r?`style="border: 0.15em solid ${r}; 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}">${e}</span>\n </div>\n `,document.body.appendChild(o)},r=(n={})=>{const{timeLoading:e=500}=n,r=document.querySelector(".page-loading.active");r&&setTimeout((()=>{var n;null===(n=r.parentElement)||void 0===n||n.removeChild(r),r.classList.remove("active")}),e)};window.loadingRequest={showLoading:e,hideLoading:r},n.hideLoading=r,n.showLoading=e}));