Sass spinner mixin sample

_spinner.scss

/*
 * Pure CSS spinner, taken from:
 * https://stephanwagner.me/only-css-loading-spinner
 *
 * You may also see:
 * https://github.com/loadingio/loading.css
 */
@keyframes spinner {
    to {transform: rotate(360deg);}
}

/*
 * Add a simple round spinner
 *
 * You should use it in pseudo element, see sample below
 */
@mixin add_spinner(
    $size: 30px,
    $main-color: #ccc,
    $alt-color: #07d,
    $thickness: 1px
){
    content: '';
    box-sizing: border-box;
    width: $size;
    height: $size;
    border-radius: 50%;
    border: $thickness solid $main-color;
    border-top-color: $alt-color;
    animation: spinner .6s linear infinite;
}

/*
* Spinner sample with default parameters

.spinner{
    &::before {
        @include add_spinner();
    }
}

*/