web-mojo/dist/loader.es.js

WEB-MOJO - A lightweight JavaScript framework for building data-driven web applications

(function() {
  if (document.getElementById("mojo-initial-loader")) return;
  const n = (() => {
    const e = document.body.classList;
    return e.contains("mojo-loader-theme-futuristic") ? "futuristic" : e.contains("mojo-loader-theme-minimal") ? "minimal" : e.contains("mojo-loader-theme-dark") ? "dark" : e.contains("mojo-loader-theme-light") ? "light" : e.contains("mojo-loader-theme-corporate") ? "corporate" : e.contains("mojo-loader-theme-playful") ? "playful" : "default";
  })(), m = `
        .mojo-loader-body { overflow: hidden; }
        .mojo-loader-container {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 9999; display: flex; align-items: center; justify-content: center;
            transition: opacity 0.3s ease-in-out;
            /* Default Theme (Purple) */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .mojo-loader-content {
            background: rgba(255, 255, 255, 0.95); padding: 3rem; border-radius: 1rem;
            text-align: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px); max-width: 400px; margin: 2rem;
        }
        .mojo-loader-spinner { width: 3rem; height: 3rem; border-width: 0.25em; color: #667eea; }
        .mojo-loader-fade-out { opacity: 0; }

        /* --- Standard Themes --- */
        .mojo-loader-theme-dark .mojo-loader-container { background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); }
        .mojo-loader-theme-dark .mojo-loader-content { background: rgba(45, 55, 72, 0.95); color: #e2e8f0; }
        .mojo-loader-theme-dark .mojo-loader-content .text-dark { color: #e2e8f0 !important; }
        .mojo-loader-theme-dark .mojo-loader-content .text-muted { color: #a0aec0 !important; }
        .mojo-loader-theme-dark .mojo-loader-spinner { color: #718096; }
        .mojo-loader-theme-light .mojo-loader-container { background: linear-gradient(135deg, #e2e8f0 0%, #f7fafc 100%); }
        .mojo-loader-theme-light .mojo-loader-spinner { color: #a0aec0; }
        .mojo-loader-theme-corporate .mojo-loader-container { background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%); }
        .mojo-loader-theme-corporate .mojo-loader-spinner { color: #63b3ed; }
        .mojo-loader-theme-playful .mojo-loader-container { background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%); }
        .mojo-loader-theme-playful .mojo-loader-spinner { color: #fbd38d; }

        /* --- Animation Theme: Futuristic --- */
        .mojo-loader-theme-futuristic .mojo-loader-container { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); }
        .mojo-loader-theme-futuristic .mojo-loader-content { background: rgba(30, 41, 59, 0.9); color: #94a3b8; }
        .mojo-loader-theme-futuristic .mojo-loader-content .text-dark { color: #e2e8f0 !important; }
        .mojo-loader-theme-futuristic .mojo-loader-content .text-muted { color: #64748b !important; }
        .mojo-loader-pulse-container { width: 60px; height: 60px; margin: 0 auto 1.5rem; position: relative; }
        .mojo-loader-hexagon {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background-color: #0ea5e9;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            animation: pulse 2s ease-in-out infinite;
        }
        .mojo-loader-hexagon:nth-child(2) { animation-delay: 0.5s; }
        @keyframes pulse {
            0%, 100% { transform: scale(0.8); opacity: 0.5; }
            50% { transform: scale(1); opacity: 1; }
        }

        /* --- Animation Theme: Minimal --- */
        .mojo-loader-theme-minimal .mojo-loader-container { background-color: #f8f9fa; }
        .mojo-loader-theme-minimal .mojo-loader-content { background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
        .mojo-loader-dots-container { display: flex; justify-content: center; align-items: center; height: 60px; margin-bottom: 1rem; }
        .mojo-loader-dot {
            width: 12px; height: 12px; margin: 0 4px;
            background-color: #6c757d; border-radius: 50%;
            animation: bounce 1.4s infinite ease-in-out both;
        }
        .mojo-loader-dot:nth-child(1) { animation-delay: -0.32s; }
        .mojo-loader-dot:nth-child(2) { animation-delay: -0.16s; }
        @keyframes bounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1.0); }
        }
    `, s = `
        <div class="mojo-loader-container" id="mojo-initial-loader">
            <div class="mojo-loader-content">
                ${(() => {
    switch (n) {
      case "futuristic":
        return `
                    <div class="mojo-loader-pulse-container">
                        <div class="mojo-loader-hexagon"></div>
                        <div class="mojo-loader-hexagon"></div>
                    </div>`;
      case "minimal":
        return `
                    <div class="mojo-loader-dots-container">
                        <div class="mojo-loader-dot"></div>
                        <div class="mojo-loader-dot"></div>
                        <div class="mojo-loader-dot"></div>
                    </div>`;
      default:
        return '<div class="spinner-border mojo-loader-spinner mb-3" role="status"><span class="visually-hidden">Loading...</span></div>';
    }
  })()}
                <h4 class="text-dark mb-2">Initializing</h4>
                <p class="text-muted mb-3" id="mojo-loading-message">Loading application...</p>
                ${n !== "minimal" ? `
                <div class="progress" style="height: 4px">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" id="mojo-loading-progress"></div>
                </div>` : ""}
            </div>
        </div>
    `;
  document.head.insertAdjacentHTML("beforeend", `<style>${m}</style>`), document.body.insertAdjacentHTML("beforeend", s), document.body.classList.add("mojo-loader-body");
  const r = document.getElementById("mojo-initial-loader"), t = document.getElementById("mojo-loading-progress"), o = document.getElementById("mojo-loading-message"), d = ["Connecting...", "Loading components...", "Preparing interface...", "Finalizing..."];
  let i = 0, a = 0;
  const l = () => {
    a += Math.random() * 12 + 3, a > 90 && (a = 90), t && (t.style.width = `${a}%`), Math.random() < 0.3 && i < d.length - 1 && (i++, o && (o.textContent = d[i])), a < 90 && setTimeout(l, 250 + Math.random() * 400);
  };
  window.hideInitialLoader = function() {
    r && (t && (t.style.width = "100%", t.classList.remove("progress-bar-striped", "progress-bar-animated")), o && (o.textContent = "Ready!"), document.body.classList.remove("mojo-loader-body"), setTimeout(() => {
      r.classList.add("mojo-loader-fade-out"), setTimeout(() => r.remove(), 300);
    }, 200));
  }, setTimeout(l, 200), setTimeout(() => {
    document.getElementById("mojo-initial-loader") && o && (o.textContent = "This is taking longer than usual...");
  }, 1e4), setTimeout(() => {
    document.getElementById("mojo-initial-loader") && (console.warn("Loading timeout - forcing loader hide."), window.hideInitialLoader());
  }, 3e4);
})();