.loading-box {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #303240;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-box .line {
  stroke: #1677ff;
  /* stroke-width: 10px; */
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  /* animation: stroke 1.5s infinite; */
  animation: stroke 1.5s forwards;
}

.loading {
  width: 100px;
  height: 60px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: absolute;
  animation: eff 2s ease-in-out infinite;
  mix-blend-mode: hard-light;
  /*混合模式*/
  /* filter: blur(2px); */
  /*模糊滤镜*/
}

.circle:nth-child(1) {
  background-color: #db2f00;
}

.circle:nth-child(2) {
  background-color: #13a3a5;
  animation-delay: 1s;
}

@keyframes eff {
  0%,
  50%,
  100% {
    transform: translateX(0)
  }

  25% {
    transform: translateX(70%)
  }

  75% {
    transform: translateX(-70%)
  }
}

@keyframes stroke {
  to {
    stroke-dashoffset: 0;
    fill: #1677ff;
  }
}