.page_loader {
  display: block;
  width: 100%;
  height: 13px;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  background: none;
  overflow: hidden;
  opacity: 0;
  z-index: 10000;

  transition: opacity 0.3s ease-in-out;
}

.page_loader--active {
  opacity: 1;
}

.page_loader__bar {
  display: block;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 6px;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 300% 300%;
  animation: page_loader_animation 2s ease infinite;
}

.page_loader__shadow {
  display: block;
  background: none;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  background: none;
  position: absolute;
  width: 100%;
  height: 6px;
  -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4);
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4);
}

@keyframes page_loader_animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}