@keyframes spinner-dash {
    0% {
        stroke-dashoffset: 58px
    }

    50% {
        stroke-dashoffset: 200.96px
    }

    100% {
        stroke-dashoffset: 58px
    }
}

@keyframes spinner-rotate {
    50% {
        transform: rotate(600deg)
    }

    100% {
        transform: rotate(720deg)
    }
}

@keyframes spinner-colors {
    0% {
        stroke: #3F51B5
    }

    20% {
        stroke: #09b7bf
    }

    40% {
        stroke: #90d36b
    }

    60% {
        stroke: #F44336
    }

    80% {
        stroke: #f90
    }

    100% {
        stroke: #3F51B5
    }
}

.preloader-active {
    overflow: hidden !important;
}
.preloader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 999999;
    /*background: transparent;*/
    background-image: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(242,243,244,1) 100%);
    /*background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(242,243,244,0.1) 100%)*/
}

    .preloader::after {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 100px;
        width: 150px;
        margin-left: -75px;
        margin-top: -50px;
        background-position: center center;
        background-repeat: no-repeat;
        background-image: url(/images/logo-animated.svg);
        background-size: 150px 100px;
        content: "";
        filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.3));
    }

    .preloader svg {
        transform-origin: 50% 50% 0;
        animation: spinner-rotate 1.333s linear infinite;
        width: 48px;
        height: 48px;
        left: 50%;
        position: absolute;
        margin-left: -24px;
        top: 50%;
        margin-top: 50px;
    }

    .preloader circle {
        fill: transparent;
        stroke: #ff9800;
        stroke-linecap: round;
        stroke-dasharray: 200.96;
        stroke-dashoffset: 58px;
        animation: spinner-dash 1.333s linear infinite, spinner-colors 10.644s linear infinite
    }