@-moz-keyframes circles-loader {
    0% {
        -moz-transform: rotate(-720deg);
        transform: rotate(-720deg);
    }

    50% {
        -moz-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}

@-webkit-keyframes circles-loader {
    0% {
        -webkit-transform: rotate(-720deg);
        transform: rotate(-720deg);
    }

    50% {
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}

@keyframes circles-loader {
    0% {
        -moz-transform: rotate(-720deg);
        -ms-transform: rotate(-720deg);
        -webkit-transform: rotate(-720deg);
        transform: rotate(-720deg);
    }

    50% {
        -moz-transform: rotate(720deg);
        -ms-transform: rotate(720deg);
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}
/* :not(:required) hides this rule from IE9 and below */
.circles-loader:not(:required) {
    position: relative;
    text-indent: -9999px;
    display: inline-block;
    width: 25px;
    height: 25px;
    background: #5c47ff;
    border-radius: 100%;
    -moz-animation: circles-loader 3s infinite ease-in-out;
    -webkit-animation: circles-loader 3s infinite ease-in-out;
    animation: circles-loader 3s infinite ease-in-out;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

    .circles-loader:not(:required)::before {
        background: #6ace80;
        border-radius: 100%;
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        top: 18.75px;
        left: -10.82532px;
    }

    .circles-loader:not(:required)::after {
        background: #ffa07a;
        border-radius: 100%;
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        top: 18.75px;
        left: 10.82532px;
    }

@-moz-keyframes circles-loader {
    0% {
        -moz-transform: rotate(-720deg);
        transform: rotate(-720deg);
    }

    50% {
        -moz-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}

@-webkit-keyframes circles-loader {
    0% {
        -webkit-transform: rotate(-720deg);
        transform: rotate(-720deg);
    }

    50% {
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}

@keyframes circles-loader {
    0% {
        -moz-transform: rotate(-720deg);
        -ms-transform: rotate(-720deg);
        -webkit-transform: rotate(-720deg);
        transform: rotate(-720deg);
    }

    50% {
        -moz-transform: rotate(720deg);
        -ms-transform: rotate(720deg);
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}
/* :not(:required) hides this rule from IE9 and below */
.circles-loader:not(:required) {
    position: relative;
    text-indent: -9999px;
    display: inline-block;
    width: 25px;
    height: 25px;
    background: #6ab589;
    border-radius: 100%;
    -moz-animation: circles-loader 3s infinite ease-in-out;
    -webkit-animation: circles-loader 3s infinite ease-in-out;
    animation: circles-loader 3s infinite ease-in-out;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

    .circles-loader:not(:required)::before {
        background: #ff8c00 border-radius: 100%;
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        top: 18.75px;
        left: -10.82532px;
    }

    .circles-loader:not(:required)::after {
        background: #7aff8b;
        border-radius: 100%;
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        top: 18.75px;
        left: 10.82532px;
    }