<script>
    import { fade } from "svelte/transition";
</script>

<div id="container" in:fade={{ delay: 150, duration: 250 }} out:fade={{ duration: 250 }}>
    <div class="spinner" />
    <p>Loading...</p>
</div>

<style>
    @keyframes spinner {
        0% {
            transform: translate3d(-50%, -50%, 0) rotate(0);
        }
        100% {
            transform: translate3d(-50%, -50%, 0) rotate(360deg);
        }
    }
    .spinner::before {
        animation: 1.5s linear infinite spinner;
        animation-play-state: inherit;
        border: solid 5px var(--overlay-island-bg-color);
        border-bottom-color: white;
        border-radius: 50%;
        content: "";
        height: 40px;
        width: 40px;
        position: absolute;
        top: 30%;
        margin: auto;
        transform: translate3d(-50%, -50%, 0);
        will-change: transform;
    }
    #container {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: auto;
        background-color: var(--overlay-island-bg-color);
        border-radius: 15px;
        padding: 20px;
        padding-bottom: 1px;
        min-width: 90px;
        max-width: 90px;
        box-shadow: var(--box-shadow);
    }
    p {
        padding-top: 50px;
        font-weight: bolder;
        overflow-wrap: normal;
        color: var(--island-text-color);
    }
</style>
