spa-loader.html

<div class="spa-loader">
    <img class="logo" src="/stardew-perfection-randomizer/icon-tiny.webp" alt="Logo" />
    <div class="spinner"><div class="fill"></div></div>
</div>
<style>
    .spa-loader {
        display: block;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        gap: 1rem;
    }

    .logo {
        width: 96px;
        height: 96px;
    }

    .spinner {
        width: 160px;
        height: 12px;
        border-radius: 6px;
        overflow: hidden;
    }

    .fill {
        width: 160px;
        height: 12px;
        background-color: rebeccapurple;
        border-radius: 6px;

        animation: spinner ease-in-out 1.5s infinite;
    }

    @keyframes spinner {
        from {
            transform: translateX(-100%);
        }
        to {
            transform: translate(100%);
        }
    }
</style>