.loader-wrapper {
    background-color: #fff;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 11
}

.loader-wrapper,.loader-wrapper .loader-index {
    align-items: center;
    display: flex;
    justify-content: center
}

.loader-wrapper .loader-index {
    filter: url(#goo);
    position: relative
}

.loader-wrapper .loader-index:after {
    animation: grow 2s cubic-bezier(.14,.05,.55,.5) infinite alternate;
    background: var(--theme-default);
    border-radius: 50%;
    content: "";
    height: 4em;
    position: absolute;
    transform: scale(.5);
    width: 4em
}

.loader-wrapper .loader-index span {
    animation: move 4s ease-in-out infinite;
    background: var(--theme-secondary);
    border-radius: 50%;
    height: 2em;
    margin-right: 2em;
    position: relative;
    transform: translateX(7em);
    width: 2em
}

.loader-wrapper .loader-index span:before {
    background: var(--theme-default);
    left: 3em
}

.loader-wrapper .loader-index span:after,.loader-wrapper .loader-index span:before {
    animation: shrink 2s ease-in-out infinite;
    border-radius: 50%;
    content: "";
    height: 2em;
    position: absolute;
    transform: translateX(0);
    width: 2em
}

.loader-wrapper .loader-index span:after {
    background: #40b8f5;
    right: 3em
}

@keyframes grow {
    0% {
        background: #40b8f5;
        transform: scale(.5)
    }

    50% {
        background: var(--theme-secondary);
        transform: scale(1)
    }
}

@keyframes move {
    0% {
        transform: translateX(7em)
    }

    50% {
        transform: translateX(-5em)
    }
}

@keyframes shrink {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(-1em)
    }
}

.loader-wrapper svg {
    height: 0;
    width: 0
}

.loader-wrapper body {
    background: #000;
    display: grid;
    font-family: sans;
    margin: 0;
    min-height: 100vh;
    place-content: center
}

.loader-wrapper h1 {
    color: #fff;
    letter-spacing: 3px;
    margin-bottom: 2em;
    position: relative;
    text-align: center;
    z-index: 2
}

.loader-wrapper h1:before {
    background: linear-gradient(to right,var(--theme-secondary),var(--theme-default),#40b8f5);
    color: #fff;
    content: "";
    font-size: .5em;
    font-variant: small-caps;
    font-weight: 400;
    height: 1px;
    left: .75em;
    position: absolute;
    top: 2.75em;
    width: 2.5em
}


.loader-wrapper:after {
    content: attr(data-label);
    position: fixed;
    color: #aaa;
    margin-top: 100px;
    font-size: 20px;
    font-family: 'Roboto';
}