@import './mask.scss';
@import './activityindicator.scss';
@import "../../styles/themes/variable.scss";

#{$xh-prefix}-loading {
  &-main {
    position: fixed;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 8px;
    transform: translate(-50%, -50%);
    z-index: 999;
    &.hasTip {
      padding: 28px 60px;
    }
    padding: 60px;
    background: rgba(0,0,0,0.75);
    &-gif {
      width: 60px;
      height: 60px;
      background: url('https://stest.xh1.cn/resources/images/app-alert/loading.png') no-repeat center/cover;
      animation: loadingSpin 1s linear infinite;
    }
    @keyframes loadingSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    // &-spinner {
    //   width: 100px;
    //   height: 100px;
    //   position: relative;
    //   &-circle {
    //     width: 100%;
    //     height: 100%;
    //     top: 0;
    //     left: 0;
    //     position: absolute;
    //     .dot-rotate {
    //       display: block;
    //       margin: 0 auto;
    //       width: 15%;
    //       height: 15%;
    //       border-radius: 100%;
    //       animation: xh-spinner-circle 1.2s infinite ease-in-out both;
    //       background-color: $font-color-secondary;
    //     }
    //   }
    //   @for $var from 1 through 12 {
    //     .is-circle#{$var} {
    //       transform: rotate(30+30 * ($var - 1) + deg);
    //       .dot-rotate {
    //         animation-delay: -(1 - 0.1 * ($var - 1)) + s;
    //       }
    //     }
    //   }
    // }
    &-tip {
      display: block;
      font-size: 24px;
      margin-top: 18px;
      color: #FFF;
    }
  }

  &-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999998;
  }
}

@keyframes xh-spinner-circle {
  0%,
  39%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-180deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}