.jf-loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  @include c3(transition, all 0.2s cubic-bezier(0.18, 0.65, 1, 1));

  .jf-loading-box {
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    @include px2rem(width,180);
    @include px2rem(height,180);
    margin:-1.2rem
    /* 90/75 */
    /* 90/75 */
    0 0 -1.2rem;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);

    .jf-loading-icon {
      display: block;
      @include px2rem(width,58);
      @include px2rem(height,63);
      background: url("data:image/png;base64,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") no-repeat;
      background-size: cover;
      margin:0.4rem
      /* 30/75 */
      auto 0.13rem
      /* 10/75 */
      auto;
    }

    .jf-loading-p-text {
      text-align: center;
      @include px2rem(font-size, 24);
      color: #fff;
      line-height: 1;
    }

    .jf-loading-circle-list {
      text-align: center;
      width: 100%;
    }

    .jf-loading-circle-list span {
      display: inline-block;
      @include px2rem(width,11);
      @include px2rem(height,11);
      background-color: #828282;
      border-radius: 50%;
      @include px2rem(margin-left,10);
    }
  }

  .jf-loading-circle {
    @include c3(animation, 1.2s jf-loading-animate-cirlce cubic-bezier(0.65, 0.05, 0.36, 1) infinite);
  }

  .jf-loading-cirlce2 {
    @include c3(animation-delay, 0.3s);
  }

  .jf-loading-cirlce3 {
    @include c3(animation-delay, 0.6s);
  }
  @-webkit-keyframes jf-loading-animate-cirlce {
    0%,
    100% {
      background-color: #fafafa;
      @include c3(transform, scale(1.2));
    }

    25%,
    75% {
      background-color: #c6c6c6;
    }

    50% {
      background: #7a7a7a;
      @include c3(transform, scale(.9));
    }
  }
  @keyframes jf-loading-animate-cirlce {
    0%,
    100% {
      background-color: #fafafa;
      @include c3(transform, scale(1.2));
    }

    25%,
    75% {
      background-color: #c6c6c6;
    }

    50% {
      background: #7a7a7a;
      @include c3(transform, scale(.9));
    }
  }
}