[data-theme="dark"]
  #loader 
    .loading-bg
      background-color: rgba(37, 37, 37, .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, .9)
    transition: .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: .5s

    .loading-taichi
      opacity: .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)