/* ****************************
https://github.com/epicmaxco/epic-spinners
https://epic-spinners.epicmax.co/#/

Example Usage:
<div class="hollow-dots-spinner" :style="spinnerStyle" id="spinner-id">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>
$("#spinner-id").hide();

***************************** */

.hollow-dots-spinner, .hollow-dots-spinner * {
    box-sizing: border-box;
}

.hollow-dots-spinner {
    height: 15px;
    width: calc(30px * 3);
}

.hollow-dots-spinner .dot {
    width: 12px;
    height: 12px;
    margin: 0 calc(15px / 2);
    border: calc(15px / 5) solid #07abc1;
    border-radius: 50%;
    float: left;
    transform: scale(0);
    animation: hollow-dots-spinner-animation 1000ms ease infinite 0ms;
}

.hollow-dots-spinner .dot:nth-child(1) {
    animation-delay: calc(300ms * 1);
}

.hollow-dots-spinner .dot:nth-child(2) {
    animation-delay: calc(300ms * 2);
}

.hollow-dots-spinner .dot:nth-child(3) {
    animation-delay: calc(300ms * 3);

}

@keyframes hollow-dots-spinner-animation {
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}