css: loading animation - basic

_loading.scss

// inspired by http://codepen.io/anon/pen/fGatk

// don't use on :before in older Webkits (e.g iOS6) - http://css-tricks.com/pseudo-element-animationstransitions-bug-fixed-in-webkit/
@mixin loading($radius, $width, $bgColor, $fgColor) {
    display:inline-block;
    width: $radius;
    height: $radius;
    @include border-radius(50%);
    background-color: transparent;
    animation: rotate .75s infinite linear;
    -webkit-animation: rotate .75s infinite linear;
    border-left: $width solid $bgColor;
    border-bottom: $width solid $bgColor;
    border-right: $width solid $bgColor;
    border-top: $width solid $fgColor;
}
@keyframes rotate {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}