//
// Spinner Circle
//
// Displays a rotating light circle with more colored quarter.
// For setting light and more colored part, set own class to element and set border color for parent and border-top of element:before.
// For setting size of element, expand the font-size attribute.
//
// Example HTML:
//   <div class="spinner-circle my_circle"><div>Loading…</div></div>
//
// Extend CSS:
//   .my_circle {
//       font-size: 80px;
//       border-color: rgba(0,0,0, 0.3);
//   }
//
//  .my_circle:before {
//       border-top-color: rgba(0,0,0, 0.8);
//   }


//
// Animations

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

@mixin spinner-circle($circle-color: rgba(0, 0, 0, 0.3), $ident-color: rgba(0, 0, 0, 0.8)) {
    position:relative;
    display: block;
    height: 1em;
    width: 1em;
    margin: 0 auto;
    text-indent: 999em;
    animation: spinner-circle .6s infinite linear;
    border: 0.2em solid $circle-color;
    border-radius: 100%;

    &:before {
        content: "";
        display: block;
        position: absolute;
        left: -0.2em;
        top: -0.2em;
        height: 100%;
        width: 100%;
        border-top: 0.2em solid $ident-color;
        border-left: 0.2em solid transparent;
        border-bottom: 0.2em solid transparent;
        border-right: 0.2em solid transparent;
        border-radius: 100%;
    }
}

//
// Spinner
//
.spinner-circle {
    @include spinner-circle(rgba($spinner--color, 0.3), rgba($spinner--color, 0.8));
}