Spinning loader on page change

[unlustucru]

When I understood Weweb could make SPAs, I thought I would be able to have a spinning loader show up when navigating between pages, but apparently that is not the case?

Is my only option to have a single page and show/hide sections accordingly?

[Newtothis]

Hi,

I believe you should be able to do this with multi-page sections and a work flow action ‘page loader’

[unlustucru]

Hi @Newtothis that’s the built-in progress bar loader, not a custom-made spinning loader.

[Newtothis]

Ah my bad, have you had a look through this?

Loader | WeWeb documentation

[unlustucru]

@Newtothis yes it’s only for the built-in loader

[Newtothis]

@Joyce - Any ideas?

[Vuotian]

With JS you can do it.
Example

function showLoader() {
    // Crearing element
    const spinner = document.createElement('div');
    spinner.id = 'spinner';
    spinner.style.position = 'fixed';
    spinner.style.top = '50%';
    spinner.style.left = '50%';
    spinner.style.transform = 'translate(-50%, -50%)';
    spinner.style.width = '50px';
    spinner.style.height = '50px';
    spinner.style.border = '4px solid rgba(0, 0, 0, 0.1)';
    spinner.style.borderRadius = '50%';
    spinner.style.borderTopColor = '#3498db';
    spinner.style.animation = 'spin 1s ease-in-out infinite';

    // Lisätään spinner sivulle
    document.body.appendChild(spinner);

    // Lisätään spinnerin pyörimisanimaatio
    const styleSheet = document.createElement('style');
    styleSheet.type = 'text/css';
    styleSheet.innerText = `
        @keyframes spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
    `;
    document.head.appendChild(styleSheet);
}

function hideLoader() {
    const spinner = document.getElementById('spinner');
    if (spinner) {
        spinner.remove();
    }
}

// Näyttää loaderin
showLoader();

// Piilottaa loaderin 5 sekunnin kuluttua (esimerkiksi)
setTimeout(hideLoader, 5000);