.app-loading {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
	background-color:#f5f7f9;
}
.app-loading_logo {
  width: 128px;
  height: 128px;
}
.app-loading__dot-wrapper {
  width: 56px;
  height: 56px;
  margin: 36px 0;
}
.app-loading__dot {
  position: relative;
  height: 100%;
  transform: rotate(45deg);
  animation-name: loadingRotate;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes loadingRotate {
  to {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
}
@-webkit-keyframes loadingRotate {
  to {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg);
  }
}
.app-loading__dot > i {
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  background: #1890ff;
  border-radius: 50%;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  transform-origin: 50% 50%;
  opacity: 0.3;
  animation: spinOpacity 1s infinite linear alternate;
}
@keyframes spinOpacity {
  to {
    opacity: 1;
  }
}
@-webkit-keyframes spinOpacity {
  to {
    opacity: 1;
  }
}
.delay-400 {
  animation-delay: 0.4s !important;
}
.delay-800 {
  animation-delay: 0.8s !important;
}
.delay-1200 {
  animation-delay: 1.2s !important;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.top {
  top: 0;
}
.bottom {
  bottom: 0;
}
.app-loading_title {
  font-size: 28px;
  color: #646464;
}