.ion-loader {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0, 0.2);
}

    .ion-loader svg {
        display: block;
        position: absolute;
        width: 80px;
        height: 80px;
        left: 50%;
        /*top: 90%;*/
        top: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        box-shadow: 0 3px 15px -5px rgba(0, 0, 0, .35);
        border-radius: 50%;
        transition: all 500ms cubic-bezier(0.5, 1.25, 0.5, 1.25);
    }

    .ion-loader.ion-show {
        /*top: 50%;
        opacity: 1;
        visibility: visible;*/
    }

    .ion-loader.ion-hide {
        top: 90%;
        opacity: 0;
        visibility: hidden;
    }

    .ion-loader .ion-loader-circle {
        /*animation: rotate 2s linear infinite;
        position: relative;
        height: 80px;
        width: 80px;*/
    }

        .ion-loader .ion-loader-circle .ion-loader-path {
            position: absolute;
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
            stroke-linecap: square;
            stroke-width: 5px;
            animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
        }

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}

@keyframes color {
    100%, 0% {
        stroke: #0193d7;
    }

    40% {
        stroke: #40c2fe;
    }

    66% {
        stroke: #0193d7;
    }

    80%, 90% {
        stroke: #014e71;
    }
}


.loader-bg::after {
    /*content: '';
    display: block;

    background: #111;
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0px;
    left: 0px;*/
}