LoadingAnimation.less

.LoadingAnimation {
    @offset: 187;
    @duration: 1.4s;

    .spinner {
        animation: rotator @duration linear infinite;
        width: 140px;
        height: 140px;
    }

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

    .path {
        stroke-dasharray: @offset;
        stroke-dashoffset: 0;
        stroke-width: 1;
        transform-origin: center;
        animation:
            dash @duration ease-in-out infinite,
            colors (@duration*4) ease-in-out infinite;
    }

    @keyframes colors {
        0% { stroke: #79174C; }
        25% { stroke: #F26B36; }
        50% { stroke: #79174C; }
        75% { stroke: #F26B36; }
        100% { stroke: #F26B36; }
    }

    @keyframes dash {
        0% { stroke-dashoffset: @offset; }
        50% {
            stroke-dashoffset: @offset/4;
            transform:rotate(135deg);
        }
        100% {
            stroke-dashoffset: @offset;
            transform:rotate(450deg);
        }
    }
}