.loading {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
}

.loading span {
  margin-top: 12px;
  font-size: 12px;
  color: #1d2088;
}

.loading-text {
  display: flex; /*让dot和文字在同一行*/
}
dot {
  /*让点垂直居中*/
  height: 1em;
  line-height: 1;
  /*让点垂直排列*/
  display: flex;
  flex-direction: column;
  /*溢出部分的点隐藏*/
  overflow: hidden;
}
dot::before {
  /*三行三种点，需要搭配white-space:pre使用才能识别\A字符*/
  content: '...\A..\A.';
  white-space: pre-wrap;
  animation: dot 3s infinite step-end; /*step-end确保一次动画结束后直接跳到下一帧而没有过渡*/
}
@keyframes dot {
  33% {
    transform: translateY(-2em);
  }
  66% {
    transform: translateY(-1em);
  }
}