#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;
}

.curtain {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 2;
  transition: transform 1s ease-in-out;
  background-size: 200% 100%;
  background-repeat: no-repeat;
}

.curtain.left {
  left: 0;
  background-position: left center;
}

.curtain.right {
  right: 0;
  background-position: right center;
}

body.loaded .curtain.left {
  transform: translateX(-100%);
}

body.loaded .curtain.right {
  transform: translateX(100%);
}