.ui-loading {
  display: none;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: auto;
  user-select: none;
  z-index: 1300;
  &-text{
   .ui-loading-items{
    top:40%;
   }
   .ui-loading-container{
    min-height:r(92);
   }
  }
  &-inner{
    position:absolute;
    bottom:r(10);
    left:0;
    right:0;
    text-align: center;
    font-size:r(12.5);
  }
  &-open {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-container {
    position: relative;
    width: r(90);
    height: r(90);
    padding: r(15) r(11);
    border-radius: r(6);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    font-size: r(15);

    p {
      margin: 0;
      padding: 0;
      font-size: r(12);
      line-height: 1.5;
      overflow: hidden;
    }
  }

  &-items {
    position: absolute;
    left: 50%;
    top: 50%;
  }

  &-item {
    position: absolute;
    top: -1px;
    opacity: 0.25;

    &:before {
      content: '';
      position: absolute;
      width: r(9.14);
      height: r(3.08);
      background: rgb(209, 209, 213);
      box-shadow: rgba(0, 0, 0, 0.0980392) 0 0 1px;
      border-radius: 1px;
      transform-origin: left 50% 0;
    }

    &:nth-of-type(1) {
      animation: opacity-60-25-0-12 1.25s linear infinite;
      &:before {
        transform: rotate(0deg) translate(r(7.92), 0);
      }
    }

    &:nth-of-type(2) {
      animation: opacity-60-25-1-12 1.25s linear infinite;
      &:before {
        transform: rotate(30deg) translate(r(7.92), 0);
      }
    }

    &:nth-of-type(3) {
      animation: opacity-60-25-2-12 1.25s linear infinite;
      &:before {
          transform: rotate(60deg) translate(r(7.92), 0);
      }
    }

    &:nth-of-type(4) {
      animation: opacity-60-25-3-12 1.25s linear infinite;
      &:before {
        transform: rotate(90deg) translate(r(7.92), 0);
      }
    }

    &:nth-of-type(5) {
      animation: opacity-60-25-4-12 1.25s linear infinite;
      &:before {
          transform: rotate(120deg) translate(r(7.92), 0);
      }
    }

    &:nth-of-type(6) {
      animation: opacity-60-25-5-12 1.25s linear infinite;
      &:before {
        transform: rotate(150deg) translate(r(7.92), 0);
      }
    }

    &:nth-of-type(7) {
      animation: opacity-60-25-6-12 1.25s linear infinite;
      &:before {
        transform: rotate(180deg) translate(r(7.92), 0);
      }
    }

    &:nth-of-type(8) {
      animation: opacity-60-25-7-12 1.25s linear infinite;
      &:before {
        transform: rotate(210deg) translate(r(7.92), 0);
      }
    }

    &:nth-of-type(9) {
      animation: opacity-60-25-8-12 1.25s linear infinite;
      &:before {
        transform: rotate(240deg) translate(r(7.92), 0);
      }
    }

    &:nth-of-type(10) {
        animation: opacity-60-25-9-12 1.25s linear infinite;
        &:before{
            transform: rotate(270deg) translate(r(7.92), 0);
        }
    }

    &:nth-of-type(11) {
        animation: opacity-60-25-10-12 1.25s linear infinite;
        &:before{
            transform: rotate(300deg) translate(r(7.92), 0);
        }
    }

    &:nth-of-type(12) {
      animation: opacity-60-25-11-12 1.25s linear infinite;
      &:before {
        transform: rotate(330deg) translate(r(7.92), 0);
      }
    }
  }
}

@keyframes opacity-60-25-0-12 {
  0% { opacity: 0.25; }
  0.01% { opacity: 0.25; }
  0.02% { opacity: 1; }
  60.01% { opacity: 0.25; }
  100% { opacity: 0.25; }
}

@keyframes opacity-60-25-1-12 {
  0% { opacity: 0.25; }
  8.34333% { opacity: 0.25; }
  8.35333% { opacity: 1; }
  68.3433% { opacity: 0.25; }
  100% { opacity: 0.25; }
}

@keyframes opacity-60-25-2-12 {
  0% { opacity: 0.25; }
  16.6767% { opacity: 0.25; }
  16.6867% { opacity: 1; }
  76.6767% { opacity: 0.25; }
  100% { opacity: 0.25; }
}

@keyframes opacity-60-25-3-12 {
  0% { opacity: 0.25; }
  25.01% { opacity: 0.25; }
  25.02% { opacity: 1; }
  85.01% { opacity: 0.25; }
  100% { opacity: 0.25; }
}

@keyframes opacity-60-25-4-12 {
  0% { opacity: 0.25; }
  33.3433% { opacity: 0.25; }
  33.3533% { opacity: 1; }
  93.3433% { opacity: 0.25; }
  100% { opacity: 0.25; }
}

@keyframes opacity-60-25-5-12 {
  0% { opacity: 0.270958333333333; }
  41.6767% { opacity: 0.25; }
  41.6867% { opacity: 1; }
  1.67667% { opacity: 0.25; }
  100% { opacity: 0.270958333333333; }
}

@keyframes opacity-60-25-6-12 {
  0% { opacity: 0.375125; }
  50.01% { opacity: 0.25; }
  50.02% { opacity: 1; }
  10.01% { opacity: 0.25; }
  100% { opacity: 0.375125; }
}

@keyframes opacity-60-25-7-12 {
  0% { opacity: 0.479291666666667; }
  58.3433% { opacity: 0.25; }
  58.3533% { opacity: 1; }
  18.3433% { opacity: 0.25; }
  100% { opacity: 0.479291666666667; }
}

@keyframes opacity-60-25-8-12 {
  0% { opacity: 0.583458333333333; }
  66.6767% { opacity: 0.25; }
  66.6867% { opacity: 1; }
  26.6767% { opacity: 0.25; }
  100% { opacity: 0.583458333333333; }
}

@keyframes opacity-60-25-9-12 {
  0% { opacity: 0.687625; }
  75.01% { opacity: 0.25; }
  75.02% { opacity: 1; }
  35.01% { opacity: 0.25; }
  100% { opacity: 0.687625; }
}

@keyframes opacity-60-25-10-12 {
  0% { opacity: 0.791791666666667; }
  83.3433% { opacity: 0.25; }
  83.3533% { opacity: 1; }
  43.3433% { opacity: 0.25; }
  100% { opacity: 0.791791666666667; }
}

@keyframes opacity-60-25-11-12 {
  0% { opacity: 0.895958333333333; }
  91.6767% { opacity: 0.25; }
  91.6867% { opacity: 1; }
  51.6767% { opacity: 0.25; }
  100% { opacity: 0.895958333333333; }
}