Sass mixin to create a CSS stroke loader

strokeloader.scss

/**
 * strokeloader
 *
 * Creates a circle loader that fills the stroke
 *
 * @param {string} $radius - Radius of the loader
 * @param {string} $stroke - Width of the loaders stroke
 * @param {string} $background-colour - Colour of the inactive stroke
 * @param {string} $progress-colour - Colour of the progress stroke
 * @param {string} $clip-colour - Colour of the inner clipping circle
 * @param {string} $duration - Time it takes to animate between value changes
 *
 * @usage
 *
 * <div class="stroke-loader" data-progress="22">
 *     <div class="circle">
 *         <div class="mask -left-half">
 *             <div class="fill"></div>
 *         </div>
 *         <div class="mask -right-half">
 *             <div class="fill"></div>
 *         </div>
 *     </div>
 *     <div class="clipping-circle"></div>
 * </div>
 */
@mixin strokeloader ($radius: 100px, $stroke: 2px, $background-color: #D6DADC, $progress-colour: #97A71D, $clip-colour: #FBFBFB, $duration: 1s) {

    .stroke-loader {
        background-color: $background-color;
        border-radius: 100%;
        height: $radius * 2;
        position: relative;
        width: $radius * 2;

        .circle {
            height: 100%;
            width: 100%;

            .fill,
            .mask {
                -webkit-backface-visibility: hidden;
                border-radius: 100%;
                height: 100%;
                position: absolute;
                transition: transform $duration;
                width: 100%;
            }

            .mask {
                clip: rect(0px, $radius * 2, $radius * 2, $radius);

                .fill {
                    background-color: $progress-colour;
                    clip: rect(0px, $radius, $radius * 2, 0px);
                }
            }
        }

        .clipping-circle {
            background-color: $clip-colour;
            border-radius: 100%;
            height: calc(100% - #{$stroke * 2});
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - #{$stroke * 2});
        }

        // Loop through to 100 to make the progress styles
        @for $i from 0 through 100 {
            &[data-progress="#{$i}"] {
                .circle {
                    .fill,
                    .mask.-left-half {
                        transform: rotate(180deg / 100 * $i);
                    }
                }
            }
        }

        &[data-progress="done"] {
            transform: rotate(180deg);
            .circle {
                .fill,
                .mask.-left-half {
                    transform: rotate(360deg);
                }
            }
        }
    }
}