.spinner {
-webkit-animation: rotator 1.4s linear infinite;
        animation: rotator 1.4s linear infinite;
}

@-webkit-keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
                transform: rotate(270deg);
    }
    }

    @keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
                transform: rotate(270deg);
    }
}

.path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
    -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
    animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@-webkit-keyframes colors {
    0% {
        stroke: #08b2be;
    }
    14.285714286% {
        stroke: #08b2be;
    }
    28.571428572% {
        stroke: #08b2be;
    }
    42.857142858% {
        stroke: #08b2be;
    }
    57.142857144% {
        stroke: #08b2be;
    }
    71.42857143% {
        stroke: #08b2be;
    }
    100% {
        stroke: #08b2be;
    }
}

@keyframes colors {
    0% {
        stroke: #08b2be;
    }
    14.285714286% {
        stroke: #08b2be;
    }
    28.571428572% {
        stroke: #08b2be;
    }
    42.857142858% {
        stroke: #08b2be;
    }
    57.142857144% {
        stroke: #08b2be;
    }
    71.42857143% {
        stroke: #08b2be;
    }
    100% {
        stroke: #08b2be;
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
                transform: rotate(450deg);
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }
    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
                transform: rotate(450deg);
    }
}