@delon/theme/system/_preloader.less

ng-alain theme system library.

/**
 * 未被直接引用，为了尽可快渲染预加载状态，生成的CSS代码已直接在 `index.html` 中引用
 */
.preloader {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #49a9ee;
  transition: opacity 0.65s;
}

.preloader-hidden-add {
  display: block;
  opacity: 1;
}

.preloader-hidden-add-active {
  opacity: 0;
}

.preloader-hidden {
  display: none;
}

.cs-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cs-loader-inner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  color: #fff;
  text-align: center;

  label {
    display: inline-block;
    font-size: 20px;
    opacity: 0;

    &:nth-child(6) {
      animation: lol 3s infinite ease-in-out;
    }

    &:nth-child(5) {
      animation: lol 3s 100ms infinite ease-in-out;
    }

    &:nth-child(4) {
      animation: lol 3s 200ms infinite ease-in-out;
    }

    &:nth-child(3) {
      animation: lol 3s 300ms infinite ease-in-out;
    }

    &:nth-child(2) {
      animation: lol 3s 400ms infinite ease-in-out;
    }

    &:nth-child(1) {
      animation: lol 3s 500ms infinite ease-in-out;
    }
  }
}

@keyframes lol {
  0% {
    transform: translateX(-300px);
    opacity: 0;
  }

  33% {
    transform: translateX(0);
    opacity: 1;
  }

  66% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(300px);
    opacity: 0;
  }
}