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