/*
mounted animate
 */
$mountedColor: rgba(204, 204, 204, 0.9);
.mounted-before {
  margin: 0 auto;
  opacity: 0.85;
  text-align: left;
  border: 6px solid transparent;
  box-sizing: border-box;
  background-clip: padding-box;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  &:before,
  &:after {
    content: "";
    position: absolute;
    margin: -6px;
    box-sizing: inherit;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    opacity: 1;
    border: inherit;
    border-color: transparent;
    border-top-color: $mountedColor;
    animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.1s linear infinite;
  }
  &:before {
    border-top-color: $mountedColor;
  }
  &:after {
    border-top-color: $mountedColor;
    animation-delay: 0.44s;
  }
}

@keyframes vjs-spinner-spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinner-fade {
  0% {
    border-top-color: $mountedColor;
  }
  20% {
    border-top-color: $mountedColor;
  }
  35% {
    border-top-color: $mountedColor;
  }
  60% {
    border-top-color: $mountedColor;
  }
  100% {
    border-top-color: $mountedColor;
  }
}