https://www.ciudaddelaluz.com/components/LoadingOverlay.js

1// components/LoadingOverlay.js
2import { i18n } from "../services/I18nService.js";
3
4export function createLoaderOverlay(loadingText) {
5    const div = document.createElement('div');
6    div.id = 'loader-overlay-' + Math.random(); // ID único
7    div.role = "status";
8    div.ariaLive = "polite";
9    div.ariaLabel = loadingText;
10    div.ariaHidden = true;
11    div.className = 'fixed inset-0 z-[9999] hidden h-screen w-screen bg-white-900/20 backdrop-blur-sm flex items-center justify-center transition-opacity opacity-0 duration-500 ease-in-out';
12    div.innerHTML = `<div class="flex flex-col items-center">
13            <i class="animate-spin rounded-full h-10 w-10 text-slate-500" data-lucide="loader-circle"></i>
14            <p class="text-slate-500 font-medium animate-pulse">${loadingText}</p>
15        </div>`;
16
17    return div;
18}
19
20export function createLoaderInline(loadingText) {
21    return `<div role="status" aria-live="polite" aria-label="${loadingText}" aria-hidden="true" class="col-span-full text-center py-12">
22            <div class="flex justify-center items-center">
23                <h3 class="col-span-full text-center text-slate-500 text-2xl font-black uppercase italic mr-4">${loadingText}</h3>
24                <i class="animate-spin rounded-full h-10 w-10 text-slate-500" data-lucide="loader-circle"></i>
25            </div>
26        </div>`
27}
28
29export function createFormLoader() {
30    const t = (key) => i18n.t(key);
31
32    const div = document.createElement('div');
33    div.id = 'loader-overlay-' + Math.random(); // ID único
34    div.role = "status";
35    div.ariaLive = "polite";
36    div.ariaLabel = `${t('forms.loader')}`;
37    div.ariaHidden = true;
38    div.className = 'flex flex-col items-center justify-center w-full min-h-[400px] inset-0 z-[9999] hidden bg-white rounded-[2rem] shadow-xl border border-slate-200';
39
40    div.innerHTML = `
41        <svg class="animate-spin mb-4 h-10 w-10 text-cdl-blue mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
42            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
43            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
44        </svg>
45        <p class="text-sm font-bold text-slate-400 uppercase tracking-widest text-center">${t('forms.loader')}</p>
46    `;
47
48    return div;
49}
50
51export function showLoader(element) {
52    element?.classList.remove('hidden');
53    element?.offsetHeight;
54    element?.classList.replace('opacity-0', 'opacity-100');
55}
56
57export function hideLoader(element) {
58    element?.classList.replace('opacity-100', 'opacity-0');
59    element?.classList.add('hidden');
60}