$BackColor:rgb(97 218 251 / 100%);

.loading-global {

  .ring1,
  .ring2,
  .ring3,
  .dot {
    border: 1px solid $BackColor;
    border-radius: 50%;
  }

  .ring2,
  .ring3,
  .dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .ring1 {
    position: relative;
    margin: 20px auto;
    width: 110px;
    height: 110px;
  }

  .ring2 {
    width: 88px;
    height: 88px;
  }

  .ring3 {
    width: 66px;
    height: 66px;
  }

  .dot {
    width: 33px;
    height: 33px;
    background-color: $BackColor;
  }

  /* 圆环上的小圆点 */
  .ring1::after,
  .ring2::after,
  .ring3::after {
    position: absolute;
    left: 50%;
    margin-top: -4px;
    margin-left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: $BackColor;
    content: ' ';
  }

  /* loading 文字展示 */
  .laoding-font {
    text-align: center;
  }
}

@keyframes rotation {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.ring1::after {
  transform-origin: 4px 59px;
  animation: rotation 3s infinite linear;
}

.ring2::after {
  transform-origin: 4px 48px;
  animation: rotation 2s infinite linear;
}

.ring3::after {
  transform-origin: 4px 37px;
  animation: rotation 1.2s infinite linear;
}
