.loader_box svg {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1);
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.loader_box .stroke-animation {
    -webkit-animation: stroke-spacing 1.5s ease-in, stroke-color 6s linear;
    animation: stroke-spacing 1.5s ease-in, stroke-color 6s linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    animation-delay: 0;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

@-webkit-keyframes stroke-spacing {
    0% {
        stroke-dasharray: 0 200;
    }
    45% {
        stroke-dashoffset: 0;
        stroke-dasharray: 200 200;
    }
    90% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
    100% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
}

@keyframes stroke-spacing {
    0% {
        stroke-dasharray: 0 200;
    }
    45% {
        stroke-dashoffset: 0;
        stroke-dasharray: 200 200;
    }
    90% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
    100% {
        stroke-dashoffset: -200;
        stroke-dasharray: 200 200;
    }
}

@-webkit-keyframes stroke-color {
    0%  { stroke: #036C91; }
    24% { stroke: #49ABCB; }
    25% { stroke: #A5CE3A; }
    49% { stroke: #000000; }
    50% { stroke: #036C91; }
    74% { stroke: #49ABCB; }
    75% { stroke: #A5CE3A; }
    99% { stroke: #000000; }
}

@keyframes stroke-color {
    0%  { stroke: #036C91; }
    24% { stroke: #49ABCB; }
    25% { stroke: #A5CE3A; }
    49% { stroke: #000000; }
    50% { stroke: #036C91; }
    74% { stroke: #49ABCB; }
    75% { stroke: #A5CE3A; }
    99% { stroke: #000000; }
}