PronounsPage/app/spa-loading-template.html

<style>
    #loading {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        animation: fadeIn 10s ease;
        -webkit-animation: fadeIn 10s ease;
        animation-fill-mode: forwards;
        overflow: hidden;
        font-family: sans-serif;
    }

    @keyframes fadeIn {
        0% {
            visibility: hidden;
            opacity: 0;
        }
        20% {
            visibility: visible;
            opacity: 0;
        }
        100% {
            visibility: visible;
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeIn {
        0% {
            visibility: hidden;
            opacity: 0;
        }
        20% {
            visibility: visible;
            opacity: 0;
        }
        100% {
            visibility: visible;
            opacity: 1;
        }
    }

    #loading>div,
    #loading>div:after {
        border-radius: 50%;
        width: 5rem;
        height: 5rem;
    }

    #loading>div {
        font-size: 10px;
        position: relative;
        text-indent: -9999em;
        border: .5rem solid transparent;
        border-left: .5rem solid #C71585;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: spin 1.1s infinite linear;
        animation: spin 1.1s infinite linear;
    }

    #loading.error {
        visibility: visible;
        opacity: 1;
    }

    #loading.error>div {
        border-left: .5rem solid #ff4500;
        animation-duration: 5s;
    }

    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
</style>

<script>
    window.addEventListener('error', (e) => {
        const l = document.getElementById('loading');
        if (!l) {
            return;
        }
        l.classList.add('error');
        const p = document.createElement("p");
        p.innerHTML = `
            Apologies, there has been some error while loading the page.
            Please try to <a href="https://www.wikihow.com/Clear-Your-Browser%27s-Cache">clear your cache</a>
            and if the problem persists, reach to us via technical@pronouns.page attaching the following error message:
          `;
        l.appendChild(p);
        const q = document.createElement("pre");
        q.textContent = `${e.filename}:${e.lineno}:${e.colno}: ${e.message}`;
        l.appendChild(q);
    });
</script>

<div id="loading" aria-live="polite" role="status"><div>Loading…</div></div>