# Spinning loader on page change

**URL:** <https://community.weweb.io/t/spinning-loader-on-page-change/7893>\
**Category:** Tips and Hacks\
**Tags:** design\
**Created:** [April 2, 2024, 7:57am UTC](https://community.weweb.io/t/spinning-loader-on-page-change/7893 "2024-04-02T07:57:55Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![unlustucru](https://avatars.discourse-cdn.com/v4/letter/u/e36b37/32.png) [@unlustucru](https://community.weweb.io/u/unlustucru)\
**Post date:** [April 2, 2024, 7:57am UTC](https://community.weweb.io/t/spinning-loader-on-page-change/7893/1 "2024-04-02T07:57:55Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Newtothis](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Newtothis](https://community.weweb.io/u/Newtothis)\
**Post date:** [April 2, 2024, 12:38pm UTC](https://community.weweb.io/t/spinning-loader-on-page-change/7893/2 "2024-04-02T12:38:44Z")

</div>

Hi,

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

 ![Screenshot 2024-04-02 at 13.37.28](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/06fd9fe1de80661714c4377773dbb0d2192ef497.png)  
 ![Screenshot 2024-04-02 at 13.37.51](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1c7bb2eb9231bb4a5157d17f3f6075b651667b47.png)

---

<div class="post-metadata">

**Author:** ![unlustucru](https://avatars.discourse-cdn.com/v4/letter/u/e36b37/32.png) [@unlustucru](https://community.weweb.io/u/unlustucru)\
**Post date:** [April 2, 2024, 12:39pm UTC](https://community.weweb.io/t/spinning-loader-on-page-change/7893/3 "2024-04-02T12:39:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Newtothis](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Newtothis](https://community.weweb.io/u/Newtothis)\
**Post date:** [April 2, 2024, 12:41pm UTC](https://community.weweb.io/t/spinning-loader-on-page-change/7893/4 "2024-04-02T12:41:59Z")

</div>

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

> **[Loader | WeWeb documentation](https://docs.weweb.io/add-elements/elements/loader.html#loaders-on-collection-load)**
>
> Learn how to add a loader to your page

---

<div class="post-metadata">

**Author:** ![unlustucru](https://avatars.discourse-cdn.com/v4/letter/u/e36b37/32.png) [@unlustucru](https://community.weweb.io/u/unlustucru)\
**Post date:** [April 2, 2024, 12:49pm UTC](https://community.weweb.io/t/spinning-loader-on-page-change/7893/5 "2024-04-02T12:49:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Newtothis](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Newtothis](https://community.weweb.io/u/Newtothis)\
**Post date:** [April 2, 2024, 12:51pm UTC](https://community.weweb.io/t/spinning-loader-on-page-change/7893/6 "2024-04-02T12:51:41Z")

</div>

@Joyce - Any ideas?

---

<div class="post-metadata">

**Author:** ![Vuotian](https://avatars.discourse-cdn.com/v4/letter/v/f14d63/32.png) [@Vuotian](https://community.weweb.io/u/Vuotian)\
**Post date:** [April 7, 2024, 3:14pm UTC](https://community.weweb.io/t/spinning-loader-on-page-change/7893/7 "2024-04-07T15:14:17Z")

</div>

With JS you can do it.  
Example

```auto
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);

```