$spinner-duration: 4s; $spinner-size: 1.4em; $spinner-thickness: 10%;

@function spinner-tip($color) {

@return prefixed-radial-gradients(circle, closest-side, center (100%-$spinner-thickness/2), $color 100%, transparent 101%);

} @mixin spinner-line($color) {

$inner-radius: 100% - 2*$spinner-thickness;
$index: 1;
$spinner-tip: spinner-tip($color);
@each $gradient in prefixed-radial-gradients(circle, closest-side, center, transparent $inner-radius, $color $inner-radius) {
        background: $gradient border-box content-box, nth($spinner-tip, $index) border-box;
        $index: $index + 1;
}

}

/* Timing function */ /* We just do a perfectly symmetric ease-in-out, based on one parameter */ $spinner-ease: 0.6; $spinner-bezier: $spinner-ease, 0, 1-$spinner-ease, 1; $spinner-bezier-first-half: $spinner-ease, 0, (1+$spinner-ease)/2, 0.5; $spinner-bezier-second-half: (1-$spinner-ease)/2, 0.5, 1-$spinner-ease, 1;

.clr-spinner {

display: inline-block;
vertical-align: top;
position: relative;
box-sizing: border-box;
width: $spinner-size;
height: $spinner-size;
border-left: ($spinner-size/2) solid transparent;
overflow: hidden;
@each $gradient in spinner-tip($color-spinner-tip) {
        background: $gradient border-box;
}
-webkit-transform-origin: center;
transform-origin: center;
@include animation(outer-spin $spinner-duration infinite);

&::before {
        content: "";
        position: absolute;
        left: -100%;
        height: 100%;
        width: 200%;
        padding-right: 100%;
        box-sizing: border-box;
        border-radius: 50%;
        @include spinner-line($color-spinner-tip);
        -webkit-transform-origin: center;
        transform-origin: center;
        @include animation(inner-spin $spinner-duration infinite);
}

&.clr-inverted {
        @each $gradient in spinner-tip($color-button-text-inverted) {
                background: $gradient border-box;
        }

        &::before {
                @include spinner-line($color-button-text-inverted);
        }
}

}

@include keyframes(outer-spin) {

0% {
        @include animation-timing-function(cubic-bezier($spinner-bezier));
        @include transform(rotate(0deg));
}
50% {
        @include animation-timing-function(cubic-bezier($spinner-bezier));
        @include transform(rotate(540deg));
}
100% {
        @include transform(rotate(1080deg));
}

}

@include keyframes(inner-spin) {

0%, 50%, 100% {
        @include animation-timing-function(cubic-bezier($spinner-bezier-first-half));
        @include transform(rotate(0deg));
}
25%, 75% {
        @include animation-timing-function(cubic-bezier($spinner-bezier-second-half));
        @include transform(rotate(-165deg));
}

}