#loader {
  z-index: 1000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #fff;



  animation: colorchange 3.5s;
  -webkit-animation: colorchange 3.5s;
}

@keyframes colorchange {
  0%   {background: #111;}
  40%  {background: repeating-linear-gradient(45deg, hsla(60,99%,40%,1), hsla(170,99%,41%,1), hsla(335,100%,41%,1), hsla(271,99%,33%,1)) 0 0/200% no-repeat;mix-blend-mode: exclusion;}
  60%   {background: #fff;mix-blend-mode: screen;}
}

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */ {
  0%   {background: #111;}
  40%  {background: repeating-linear-gradient(45deg, hsla(60,99%,40%,1), hsla(170,99%,41%,1), hsla(335,100%,41%,1), hsla(271,99%,33%,1)) 0 0/200% no-repeat;mix-blend-mode: exclusion;}
  60%   {background: #fff;mix-blend-mode: screen;}
}


#loader.is-loaded {
  -webkit-transition: -webkit-transform .9s;
  -webkit-transform: translate(100%, 0);
  transition: transform .9s;
  transform: translate(100%, 0);
}

/**/



#loader_second {
  z-index: 1000;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;



  animation: colorchanger 3.5s;
  -webkit-animation: colorchanger 3.5s;
}

@keyframes colorchanger {
  0%   {background: #111;}
  40%  {background: repeating-linear-gradient(45deg, hsla(60,99%,40%,1), hsla(170,99%,41%,1), hsla(335,100%,41%,1), hsla(271,99%,33%,1)) 0 0/200% no-repeat;mix-blend-mode: exclusion;}
  60%   {background: #fff;mix-blend-mode: screen;}
}

@-webkit-keyframes colorchanger /* Safari and Chrome - necessary duplicate */ {
  0%   {background: #111;}
  40%  {background: repeating-linear-gradient(45deg, hsla(60,99%,40%,1), hsla(170,99%,41%,1), hsla(335,100%,41%,1), hsla(271,99%,33%,1)) 0 0/200% no-repeat;mix-blend-mode: exclusion;}
  60%   {background: #fff;mix-blend-mode: screen;}
}


#loader_second.is-loaded {
  -webkit-transition: -webkit-transform .9s;
  -webkit-transform: translate(100%, 0);
  transition: transform .9s;
  transform: translate(100%, 0);
}