Progress Indicator

.progress-indicator {
    position: absolute;
    top: calc(50% - #{size(2.5)});
    left: calc(50% - #{size(2.5)});
    width: size(5);
    height: size(5);
    animation: rotate .6s infinite linear;
    border-left: size(0.5) solid rgba($color-green, 0.2);
    border-right: size(0.5) solid rgba($color-green, 0.2);
    border-bottom: size(0.5) solid rgba($color-green, 0.2);
    border-top: size(0.5) solid rgba($color-green, 0.6);
    border-radius: 100%;
    z-index: $z-promoted;

    @include breakpoint($xs) {
        width: size(8);
        height: size(8);
        top: calc(50% - #{size(4)});
        left: calc(50% - #{size(4)});
        border-width: size(0.75);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}