.x-loading {
  background: rgba(255, 255, 255, 0.75);
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.x-loading.page-loading {
  position: absolute;
}

.x-loading.table-loading {
  position: absolute;
}

.x-loading.sm-loading {
  height: 167px;
}

.x-loading.big-loading {
  height: 900px;
}

.x-loading .loading-box {
  width: .36rem;
  height: .36rem;
  position: relative;
}

.x-loading .loading-box .dot {
  width: .12rem;
  height: .12rem;
  border-radius: 100%;
  display: inline-block;
}

.x-loading .loading-box .dot-1 {
  animation: loadingAnimate_1 1.5s linear infinite;
  background-color: #98B2FC;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.x-loading .loading-box .dot-2 {
  animation: loadingAnimate_2 1.5s linear infinite;
  background-color: #B6C9FB;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}

.x-loading .loading-box .dot-3 {
  animation: loadingAnimate_3 1.5s linear infinite;
  background-color: #D9E2FB;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.x-loading .loading-box .dot-4 {
  animation: loadingAnimate_4 1.5s linear infinite;
  background-color: #7297FF;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}

.x-loading-i18n {
  background: rgba(255, 255, 255, 0.75);
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.x-loading-i18n.page-loading {
  position: absolute;
}

.x-loading-i18n.table-loading {
  position: absolute;
}

.x-loading-i18n.sm-loading {
  height: 167px;
}

.x-loading-i18n.big-loading {
  height: 900px;
}

.x-loading-i18n .loading-box {
  width: .36rem;
  height: .36rem;
  position: relative;
}

.x-loading-i18n .loading-box .dot {
  width: .12rem;
  height: .12rem;
  border-radius: 100%;
  display: inline-block;
}

.x-loading-i18n .loading-box .dot-1 {
  animation: loadingAnimate_1 1.5s linear infinite;
  background-color: #98B2FC;
  position: absolute;
  top: 0;
  right: 50%;
  transform: translate(50%, 0);
}

.x-loading-i18n .loading-box .dot-2 {
  animation: loadingAnimate_2 1.5s linear infinite;
  background-color: #B6C9FB;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}

.x-loading-i18n .loading-box .dot-3 {
  animation: loadingAnimate_3 1.5s linear infinite;
  background-color: #D9E2FB;
  position: absolute;
  bottom: 0;
  right: 50%;
  transform: translate(50%, 0);
}

.x-loading-i18n .loading-box .dot-4 {
  animation: loadingAnimate_4 1.5s linear infinite;
  background-color: #7297FF;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}

.sm-loading {
  height: 167px;
}

@keyframes loadingAnimate_1 {
  0% {
    background-color: #98B2FC;
  }
  25% {
    background-color: #B6C9FB;
  }
  50% {
    background-color: #D9E2FB;
  }
  75% {
    background-color: #7297FF;
  }
  100% {
    background-color: #98B2FC;
  }
}

@keyframes loadingAnimate_2 {
  0% {
    background-color: #B6C9FB;
  }
  25% {
    background-color: #D9E2FB;
  }
  50% {
    background-color: #7297FF;
  }
  75% {
    background-color: #98B2FC;
  }
  100% {
    background-color: #B6C9FB;
  }
}

@keyframes loadingAnimate_3 {
  0% {
    background-color: #D9E2FB;
  }
  25% {
    background-color: #7297FF;
  }
  50% {
    background-color: #98B2FC;
  }
  75% {
    background-color: #B6C9FB;
  }
  100% {
    background-color: #D9E2FB;
  }
}

@keyframes loadingAnimate_4 {
  0% {
    background-color: #7297FF;
  }
  25% {
    background-color: #98B2FC;
  }
  50% {
    background-color: #B6C9FB;
  }
  75% {
    background-color: #D9E2FB;
  }
  100% {
    background-color: #7297FF;
  }
}