Tags: Reverted Mobile edit Mobile web edit |
Tags: Manual revert Mobile edit Mobile web edit |
| Line 295: |
Line 295: |
| }); | | }); |
| } | | } |
|
| |
| }() );
| |
|
| |
|
| |
|
| |
| /* ----------------------------------------------------------
| |
| LOADING SCREEN
| |
| ---------------------------------------------------------- */
| |
| ( function () {
| |
|
| |
| // Create the overlay
| |
| var overlay = document.createElement('div');
| |
| overlay.id = 'wiki-loader';
| |
| overlay.style.cssText = [
| |
| 'position:fixed','top:0','left:0',
| |
| 'width:100vw','height:100vh',
| |
| 'background:#f0f8ff',
| |
| 'display:flex','flex-direction:column',
| |
| 'align-items:center','justify-content:center',
| |
| 'z-index:99999','transition:opacity 0.6s ease'
| |
| ].join(';');
| |
|
| |
| // Logo
| |
| var logo = document.createElement('div');
| |
| logo.textContent = '📖';
| |
| logo.style.cssText = [
| |
| 'width:100px','height:100px','border-radius:50%',
| |
| 'background:linear-gradient(145deg,#4fc3f7,#0288d1)',
| |
| 'display:flex','align-items:center','justify-content:center',
| |
| 'font-size:48px','margin-bottom:24px',
| |
| 'animation:pulse 1s infinite alternate'
| |
| ].join(';');
| |
|
| |
| // Wiki name
| |
| var title = document.createElement('div');
| |
| title.textContent = document.title.split(' - ')[0] || 'Wiki';
| |
| title.style.cssText = [
| |
| 'font-family:Nunito,sans-serif','font-weight:900',
| |
| 'font-size:2em','color:#0288d1','margin-bottom:20px'
| |
| ].join(';');
| |
|
| |
| // Stripe bar (decorative)
| |
| var stripes = document.createElement('div');
| |
| stripes.style.cssText = [
| |
| 'width:200px','height:8px','border-radius:4px',
| |
| 'background:repeating-linear-gradient(',
| |
| '90deg,#29b6f6 0px,#29b6f6 20px,#ffffff 20px,#ffffff 40px)',
| |
| 'margin-bottom:20px'
| |
| ].join('');
| |
|
| |
| // Progress bar track
| |
| var track = document.createElement('div');
| |
| track.style.cssText = [
| |
| 'width:200px','height:6px','border-radius:4px',
| |
| 'background:#b3e5fc','overflow:hidden'
| |
| ].join(';');
| |
|
| |
| // Progress bar fill
| |
| var bar = document.createElement('div');
| |
| bar.style.cssText = [
| |
| 'height:100%','width:0%','border-radius:4px',
| |
| 'background:#0288d1','transition:width 0.3s ease'
| |
| ].join(';');
| |
|
| |
| // Loading text
| |
| var loadText = document.createElement('div');
| |
| loadText.textContent = 'Loading...';
| |
| loadText.style.cssText = [
| |
| 'font-family:Nunito,sans-serif','font-size:0.9em',
| |
| 'color:#4a7a9e','margin-top:12px'
| |
| ].join(';');
| |
|
| |
| // Pulse animation
| |
| var style = document.createElement('style');
| |
| style.textContent = [
| |
| '@keyframes pulse{',
| |
| 'from{transform:scale(1)}',
| |
| 'to{transform:scale(1.08)}',
| |
| '}'
| |
| ].join('');
| |
| document.head.appendChild(style);
| |
|
| |
| // Assemble
| |
| track.appendChild(bar);
| |
| overlay.appendChild(logo);
| |
| overlay.appendChild(title);
| |
| overlay.appendChild(stripes);
| |
| overlay.appendChild(track);
| |
| overlay.appendChild(loadText);
| |
| document.body.prepend(overlay);
| |
|
| |
| // Animate the progress bar
| |
| var messages = [
| |
| 'Raising the tent...',
| |
| 'Warming up the performers...',
| |
| 'Polishing the wiki...',
| |
| 'Almost ready...',
| |
| 'Welcome!'
| |
| ];
| |
| var progress = 0;
| |
| var msgIndex = 0;
| |
|
| |
| var ticker = setInterval(function () {
| |
| progress += Math.random() * 18 + 8;
| |
| if (progress > 100) progress = 100;
| |
| bar.style.width = progress + '%';
| |
| if (msgIndex < messages.length) {
| |
| loadText.textContent = messages[msgIndex++];
| |
| }
| |
| if (progress >= 100) clearInterval(ticker);
| |
| }, 300);
| |
|
| |
| // Hide when page is fully loaded
| |
| window.addEventListener('load', function () {
| |
| bar.style.width = '100%';
| |
| loadText.textContent = 'Welcome!';
| |
| setTimeout(function () {
| |
| overlay.style.opacity = '0';
| |
| setTimeout(function () { overlay.remove(); }, 600);
| |
| }, 400);
| |
| });
| |
|
| |
|
| }() ); | | }() ); |
