xgplayer/es/plugins/enter/index.css

video player

.xgplayer-enter {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 5;
  pointer-events: none;
}
.xgplayer-enter .show {
  display: block;
}
.xgplayer-enter .xgplayer-enter-spinner {
  display: block;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  height: 100px;
  width: 100px;
  transform: translate(-50%, -50%);
}
.xgplayer-enter .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;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar1 {
  transform: rotate(0deg) translate(0, -140%);
  animation-delay: -0s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar2 {
  transform: rotate(30deg) translate(0, -140%);
  animation-delay: -0.9163s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar3 {
  transform: rotate(60deg) translate(0, -140%);
  animation-delay: -0.833s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar4 {
  transform: rotate(90deg) translate(0, -140%);
  animation-delay: -0.7497s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar5 {
  transform: rotate(120deg) translate(0, -140%);
  animation-delay: -0.6664s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar6 {
  transform: rotate(150deg) translate(0, -140%);
  animation-delay: -0.5831s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar7 {
  transform: rotate(180deg) translate(0, -140%);
  animation-delay: -0.4998s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar8 {
  transform: rotate(210deg) translate(0, -140%);
  animation-delay: -0.4165s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar9 {
  transform: rotate(240deg) translate(0, -140%);
  animation-delay: -0.3332s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar10 {
  transform: rotate(270deg) translate(0, -140%);
  animation-delay: -0.2499s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar11 {
  transform: rotate(300deg) translate(0, -140%);
  animation-delay: -0.1666s;
}
.xgplayer-enter .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.xgplayer-nostart .xgplayer-enter {
  display: none;
}
.xgplayer.xgplayer-mobile .xgplayer-enter .xgplayer-enter-spinner {
  width: 70px;
  height: 70px;
}