.xgplayer-enter {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8);
  z-index: 5;
  pointer-events: none;
  .show {
    display: block;
  }
  .xgplayer-enter-spinner {
    display: block;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    height: 100px;
    width: 100px;
    transform: translate(-50%,-50%);
  }

  .xgplayer-enter-spinner div {
    width: 6%;
    height: 13%;
    background-color: rgba(255,255,255,0.7);
    position: absolute;
    left: 45%;
    top: 45%;
    opacity: 0;
    border-radius: 30px;
    animation: fade 1s linear infinite;
  }

  @for $i from 1 to 12 {
    .xgplayer-enter-spinner div.xgplayer-enter-bar#{$i} {
      transform: rotate(#{($i - 1) * 30 }deg) translate(0, -140%);
      animation-delay: -#{(13 - $i)%12 * 0.0833}s;
    }
  }
  .xgplayer-enter-spinner div.xgplayer-enter-bar12 {
    transform:rotate(330deg) translate(0, -142%);
    animation-delay: -0.0833s;
  }
  @keyframes fade {
    from {opacity: 1;}
    to {opacity: 0.25;}
  }
}

.xgplayer {
  &.xgplayer-is-enter {
    .xgplayer-enter {
      display: block;
      opacity: 1;
      transition: opacity 0.3s;
    }
  }
  &.xgplayer-nostart {
    .xgplayer-enter {
      display: none;
    }
  }
  &.xgplayer-mobile {
    .xgplayer-enter .xgplayer-enter-spinner {
      width: 70px;
      height: 70px;
    }
  }
}

// .not-allow-autoplay, .xgplayer-playing, .xgplayer-nostart{
//   .xgplayer-enter {
//     display: none;
//   }
// }