﻿button.bee-button-spinner,
button.bee-button-spinner-remove {
    position: relative;
    transition: all linear 100ms;
}

    button.bee-button-spinner .bbs-spinner,
    button.bee-button-spinner-add-active .bbs-spinner {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -8px;
        background: url('../images/ajax-loader-button.gif');
        display: block;
        -webkit-animation: bbs-spinner-show-anim 100ms ease-in;
        -moz-animation: bbs-spinner-show-anim 100ms ease-in;
        -o-animation: bbs-spinner-show-anim 100ms ease-in;
        animation: bbs-spinner-show-anim 100ms ease-in;
    }

    button.bee-button-spinner .bbs-content,
    button.bee-button-spinner-add-active .bbs-content {
        -webkit-animation: bbs-spinner-hide-anim 100ms ease-out;
        -moz-animation: bbs-spinner-hide-anim 100ms ease-out;
        -o-animation: bbs-spinner-hide-anim 100ms ease-out;
        animation: bbs-spinner-hide-anim 100ms ease-out;
        opacity: 0;
    }

button.bee-button-spinner-remove-active .bbs-spinner {
    opacity: 0;
    -webkit-animation: bbs-spinner-hide-anim 100ms ease-out;
    -moz-animation: bbs-spinner-hide-anim 100ms ease-out;
    -o-animation: bbs-spinner-hide-anim 100ms ease-out;
    animation: bbs-spinner-hide-anim 100ms ease-out;
}

button.bee-button-spinner-remove-active .bbs-content {
    -webkit-animation: bbs-spinner-show-anim 100ms ease-in;
    -moz-animation: bbs-spinner-show-anim 100ms ease-in;
    -o-animation: bbs-spinner-show-anim 100ms ease-in;
    animation: bbs-spinner-show-anim 100ms ease-in;
}

/* Show animation */
@-webkit-keyframes bbs-spinner-show-anim {
    from {
        opacity: 0;
        -webkit-transform: scale(2,2);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1,1);
    }
}

@-moz-keyframes bbs-spinner-show-anim {
    from {
        opacity: 0;
        -moz-transform: scale(2,2);
    }

    to {
        opacity: 1;
        -moz-transform: scale(1,1);
    }
}

@keyframes bbs-spinner-show-anim {
    from {
        opacity: 0;
        transform: scale(2,2);
    }

    to {
        opacity: 1;
        transform: scale(1,1);
    }
}

/* Hide animation */
@-webkit-keyframes bbs-spinner-hide-anim {
    from {
        opacity: 1;
        -webkit-transform: scale(1,1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(0.5,0.5);
    }
}

@-moz-keyframes bbs-spinner-hide-anim {
    from {
        opacity: 1;
        -moz-transform: scale(1,1);
    }

    to {
        opacity: 0;
        -moz-transform: scale(0.5,0.5);
    }
}

@keyframes bbs-spinner-hide-anim {
    from {
        opacity: 1;
        transform: scale(1,1);
    }

    to {
        opacity: 0;
        transform: scale(0.5,0.5);
    }
}
