hexo-theme-reimu/source/css/loader.styl

A Hakurei Reimu style Hexo theme

[data-theme='dark'] {
  #loader {
    .loading-bg {
      background-color: rgba(37, 37, 37, 0.9);
    }

    .spinner-box .loading-word {
      color: var(--red-1, #ff5252);
    }
  }
}

#loader {
  .loading-bg {
    position: fixed;
    z-index: 1000;
    width: 50%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    transition: 0.8s;
  }

  .loading-right-bg {
    right: 0;
  }

  .spinner-box {
    position: fixed;
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    opacity: 1;
    transition: 0.5s;

    .loading-taichi {
      opacity: 0.8;
    }

    .rotate {
      animation: rotate-all 2s linear infinite;
    }

    .loading-word {
      position: absolute;
      color: var(--red-1, #ff5252);
      top: calc(50% + 110px);
      left: 50%;
      transform: translate(-50%, -50%);
      font: 700 1.2rem unquote(custom-article-families) unquote(article-families) unquote(local-article-families);
    }
  }
}

#loader.loading {
  .loading-left-bg {
    transform: translate(-100%, 0);
  }

  .loading-right-bg {
    transform: translate(100%, 0);
  }
}

#loader.loading {
  .spinner-box {
    opacity: 0;
    visibility: hidden;
  }
}

vendors = official;

@keyframes rotate-all {
  100% {
    transform: rotate(360deg);
  }
}