Lidarr/UI/Content/spinner.less

@import "prefixer";
@import "bootstrap/variables";

@colorDark : @grayDark;
@colorLight : @grayLighter;

#followingBalls {
  position : relative;
  height   : 20px;
  width    : 256px;
  margin   : 50px auto;
  display  : block;

  .ball {
    background-color : @colorDark;
    position         : absolute;
    top              : 0;
    left             : 0;
    width            : 20px;
    height           : 20px;
    .border-radius(10px);
    .animation-name(bounce);
    .animation-duration(1.9s);
    .animation-iteration-count(infinite);
    .animation-direction(linear);
  }

  #ball-1 {
    .animation-delay(0s);
  }

  #ball-2 {
    .animation-delay(0.19s);
  }

  #ball-3 {
    .animation-delay(0.38s);
  }

  #ball-4 {
    .animation-delay(0.57s);
  }

  @keyframes bounce {
    0% {
      left             : 0px;
      background-color : @colorDark;
    }

    50% {
      left             : 236px;
      background-color : @colorLight;
    }

    100% {
      left             : 0px;
      background-color : @colorDark;
    }
  }

  @-moz-keyframes bounce {
    0% {
      left             : 0px;
      background-color : @colorDark;
    }

    50% {
      left             : 236px;
      background-color : @colorLight;
    }

    100% {
      left             : 0px;
      background-color : @colorDark;
    }

  }

  @-webkit-keyframes bounce {
    0% {
      left             : 0px;
      background-color : @colorDark;
    }

    50% {
      left             : 236px;
      background-color : @colorLight;
    }

    100% {
      left             : 0px;
      background-color : @colorDark;
    }

  }

  @-ms-keyframes bounce {
    0% {
      left             : 0px;
      background-color : @colorDark;
    }

    50% {
      left             : 236px;
      background-color : @colorLight;
    }

    100% {
      left             : 0px;
      background-color : @colorDark;
    }
  }

  @-o-keyframes bounce {
    0% {
      left             : 0px;
      background-color : @colorDark;
    }

    50% {
      left             : 236px;
      background-color : @colorLight;
    }

    100% {
      left             : 0px;
      background-color : @colorDark;
    }
  }
}