#page-loader {
    display: none;
}
body.page-loading {

    //@include createLoader(page, $codex-loader-color, $codex-loader-size, $codex-loader-margin, $codex-loader-speed);

    #page-loader {
        display: block;
    }

    #app {
        opacity: 0;
        display: none;
        transition: all 2s;
    }

    .side-nav {
        display: none;
        opacity: 0;
    }
}

@include makeLoader(block){
    .block-loader-content,
    > .clearfix {
        display: none;
        transition: all 2s;
    }
}


// https://github.com/greyby/vue-spinner
// BeatLoader


.v-spinner .v-beat
{
    -webkit-animation: v-beatStretchDelay 0.7s infinite linear;
    animation: v-beatStretchDelay 0.7s infinite linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
}

.v-spinner .v-beat-odd
{
    animation-delay: 0s;
}
.v-spinner .v-beat-even
{
    animation-delay: 0.35s;
}

@-webkit-keyframes v-beatStretchDelay
{
    50%
    {
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
        -webkit-opacity: 0.2;
        opacity: 0.2;
    }
    100%
    {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-opacity: 1;
        opacity: 1;
    }
}

@keyframes v-beatStretchDelay
{
    50%
    {
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
        -webkit-opacity: 0.2;
        opacity: 0.2;
    }
    100%
    {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-opacity: 1;
        opacity: 1;
    }
}