@keyframes kaltura-spinner {
  0% {
    transform: rotate(0deg) scale(0.7);
    opacity: 1;
  }
  70% {
    transform: rotate(360deg) scale(0.7);
    opacity: 1;
  }
  82% {
    transform: rotate(360deg) scale(0);
    opacity: 0;
  }
  87% {
    transform: rotate(360deg) scale(0.9);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg) scale(0.7);
    opacity: 1;
  }
}

.spinner {
  width: 100px;
  height: 100px;
  position: relative;
  animation: kaltura-spinner 2.5s infinite;

  span {
    width: $spinner-circle-radius * 2;
    height: $spinner-circle-radius * 2;
    background-color: #fff;
    display: block;
    border-radius: $spinner-circle-radius * 2;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -$spinner-circle-radius;
    margin-left: -$spinner-circle-radius;

    @for $n from 1 through 8 {
      &:nth-child(#{$n}) {
        transform: rotate($n * 45deg) translateX(-25px) translateY(-25px);
        background-color: nth($spinner-colors, $n);
      }
    }
  }
}
.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}