@import "../../../style/normalize/variables";
@import "../../../style/grid";

$spinkit-size: $base-font-size !default;
$spinkit-spinner-color:white !default;

.threebounce {
  @include spacing(auto,margin,horizontal);
  $animationDuration: 1.4s;
  $delayRange: 0.32s;
  width: auto;
  text-align: center;
  .child {
    @include spacing($fg-gutter,margin,horizontal);
    width: $spinkit-size / 2;
    height: $spinkit-size / 2;
    background-color: $spinkit-spinner-color;
    border-radius: 100%;
    display: inline-block;
    animation: threebounce $animationDuration ease-in-out 0s infinite both;
  }
  .bounce1 { animation-delay: -$delayRange; }
  .bounce2 { animation-delay: -$delayRange / 2; }  
}
  
@keyframes threebounce {
  0%, 80%, 100% {
      opacity: 0.1;
  } 40% {
      opacity: 1;
  }
}