.page-loading-animation{
  pointer-events: none;
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
}

.page-loading-animation:before,
.page-loading-animation:after{
  content: '';
  pointer-events: none;
  position: fixed;
  z-index: 99;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: rgba(0, 168, 232, 0.95);
  -webkit-animation: pageTransition 0.8s;
          animation: pageTransition 0.8s;
}

.page-loading-animation:after{
  z-index: 98;
  -webkit-transition-delay: .5s;
       -o-transition-delay: .5s;
          transition-delay: .5s;
  background: rgba(241, 184, 5, 0.9);
  -webkit-animation: pageTransition 1.2s;
          animation: pageTransition 1.2s;
}

.page-loading-animation.active,
.page-loading-animation.active:before,
.page-loading-animation.active:after{
  right: auto;
  left: 0;
  width: 100%;
}

@-webkit-keyframes pageTransition {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

@keyframes pageTransition {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}