/*
 *  Usage:
 *
      <div class="xt_woofc-spinner-three-bounce">
        <div class="xt_woofc-spinner-child xt_woofc-spinner-bounce1"></div>
        <div class="xt_woofc-spinner-child xt_woofc-spinner-bounce2"></div>
        <div class="xt_woofc-spinner-child xt_woofc-spinner-bounce3"></div>
      </div>
 *
 */
 @import "../variables";

.xt_woofc-spinner-three-bounce {
  $animationDuration: 1.4s;
  $delayRange: 0.32s;
  margin: $spinkit-spinner-margin;
  width: $spinkit-spinner-size * 2;
  text-align: center;

  .xt_woofc-spinner-child {
    width: $spinkit-spinner-size / 2;
    height: $spinkit-spinner-size / 2;
    background-color: $spinkit-spinner-color;

    border-radius: 100%;
    display: inline-block;
    animation: xt_woofc-spinner-three-bounce $animationDuration ease-in-out 0s infinite both;
  }

  .xt_woofc-spinner-bounce1 { animation-delay: $delayRange; }
  .xt_woofc-spinner-bounce2 { animation-delay: $delayRange / 2; }
}

@keyframes xt_woofc-spinner-three-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  } 40% {
    transform: scale(1.0);
  }
}