:root {
  --rainbow-color: #0364DC;
}

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--rainbow-color);
  user-select: none;
  background-color: snow;
}

.loading-container *::before,
.loading-container *::after {
  box-sizing: content-box;
}

.loading-container .loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-container .loading .loading-logo {
  width: 40px;
  /* height: 40px; */
}

.loading-container .loading .loading-logo-text {
  width: 88px;
  margin-top: 14px;
}

 /* 选中 SVG 内的所有 circle 元素 */
.loading-container .loading .loading-logo circle {
  animation: blink 2s ease-in-out infinite;
  /* 默认无延迟，下面会用 nth-child 或其它方式区分，但较难，所以用统一+随机感 */
}

/* 每个 circle 依次闪烁，delay 递增 0.1s */
.loading-container .loading .loading-logo circle:nth-of-type(1) { animation-delay: 0.0s; }
.loading-container .loading .loading-logo circle:nth-of-type(2) { animation-delay: 0.1s; }
.loading-container .loading .loading-logo circle:nth-of-type(3) { animation-delay: 0.2s; }
.loading-container .loading .loading-logo circle:nth-of-type(4) { animation-delay: 0.3s; }
.loading-container .loading .loading-logo circle:nth-of-type(5) { animation-delay: 0.4s; }
.loading-container .loading .loading-logo circle:nth-of-type(6) { animation-delay: 0.5s; }
.loading-container .loading .loading-logo circle:nth-of-type(7) { animation-delay: 0.6s; }
.loading-container .loading .loading-logo circle:nth-of-type(8) { animation-delay: 0.7s; }
.loading-container .loading .loading-logo circle:nth-of-type(9) { animation-delay: 0.8s; }
.loading-container .loading .loading-logo circle:nth-of-type(10) { animation-delay: 0.9s; }
.loading-container .loading .loading-logo circle:nth-of-type(11) { animation-delay: 1.0s; }
.loading-container .loading .loading-logo circle:nth-of-type(12) { animation-delay: 1.1s; }
.loading-container .loading .loading-logo circle:nth-of-type(13) { animation-delay: 1.2s; }
.loading-container .loading .loading-logo circle:nth-of-type(14) { animation-delay: 1.3s; }
.loading-container .loading .loading-logo circle:nth-of-type(15) { animation-delay: 1.4s; }
.loading-container .loading .loading-logo circle:nth-of-type(16) { animation-delay: 1.5s; }
.loading-container .loading .loading-logo circle:nth-of-type(17) { animation-delay: 1.6s; }
.loading-container .loading .loading-logo circle:nth-of-type(18) { animation-delay: 1.7s; }
.loading-container .loading .loading-logo circle:nth-of-type(19) { animation-delay: 1.8s; }
.loading-container .loading .loading-logo circle:nth-of-type(20) { animation-delay: 1.9s; }
.loading-container .loading .loading-logo circle:nth-of-type(21) { animation-delay: 2.0s; }
.loading-container .loading .loading-logo circle:nth-of-type(22) { animation-delay: 2.1s; }
.loading-container .loading .loading-logo circle:nth-of-type(23) { animation-delay: 2.2s; }
.loading-container .loading .loading-logo circle:nth-of-type(24) { animation-delay: 2.3s; }
.loading-container .loading .loading-logo circle:nth-of-type(25) { animation-delay: 2.4s; }
.loading-container .loading .loading-logo circle:nth-of-type(26) { animation-delay: 2.5s; }
.loading-container .loading .loading-logo circle:nth-of-type(27) { animation-delay: 2.6s; }
.loading-container .loading .loading-logo circle:nth-of-type(28) { animation-delay: 2.7s; }
.loading-container .loading .loading-logo circle:nth-of-type(29) { animation-delay: 2.8s; }
.loading-container .loading .loading-logo circle:nth-of-type(30) { animation-delay: 2.9s; }
.loading-container .loading .loading-logo circle:nth-of-type(31) { animation-delay: 3.0s; }
.loading-container .loading .loading-logo circle:nth-of-type(32) { animation-delay: 3.1s; }
.loading-container .loading .loading-logo circle:nth-of-type(33) { animation-delay: 3.2s; }
.loading-container .loading .loading-logo circle:nth-of-type(34) { animation-delay: 3.3s; }
.loading-container .loading .loading-logo circle:nth-of-type(35) { animation-delay: 3.4s; }
.loading-container .loading .loading-logo circle:nth-of-type(36) { animation-delay: 3.5s; }
.loading-container .loading .loading-logo circle:nth-of-type(37) { animation-delay: 3.6s; }
.loading-container .loading .loading-logo circle:nth-of-type(38) { animation-delay: 3.7s; }
.loading-container .loading .loading-logo circle:nth-of-type(39) { animation-delay: 3.8s; }

@keyframes blink {
  0%, 100% {
    opacity: 0.3; /* 更暗 */
  }
  50% {
    opacity: 1; /* 最亮 */
  }
}

.loading-container .tips {
  position: relative;
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.5;
}