main {
  margin: 2em;
}
/* Center the loader */
.loader {
  font-size: 500%;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  animation: pulse 2s ease-out;
  animation-iteration-count: infinite;
  opacity: 1;
}
.loader::after {
  content: "🚀";
}

@-webkit-keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

main,
header {
  display: none;
}
main[loaded="true"],
header[loaded="true"] {
  display: block;
  position: relative;
  -webkit-animation-name: loaded;
  -webkit-animation-duration: 1s;
  animation-name: loaded;
  animation-duration: 1s;
}
.loader[loaded="true"] {
  display: none;
}

@-webkit-keyframes loaded {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 0px;
    opacity: 1;
  }
}

@keyframes loaded {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}