.wrapper {
  height: 100vh;
  text-align: center;
}

.loader {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 0;
  height: 100vh;
  transition: width 0s 1.4s ease;
  z-index: 100;
}

.loader .loader__icon, .loader div.spinner-border {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.loader .loader__icon svg {
  transform-origin: 0 0;
}
.loader .loader__tile {
  position: absolute;
  left: 0;
  width: 0;
  height: 20%;
  background-color: #9ee1f8;
  background: #9ee1f8;
  background: url(../images/image-loaderbg-clouds.png) center center no-repeat #2a1752;
  background-size: cover;
  transition: width 0.3s ease;
}


.loader .loader__tile:nth-child(0) {
  top: calc(-1 * 20%);
  transition-delay: -0.2s;
}
.loader .loader__tile:nth-child(1) {
  top: calc(0 * 20%);
  transition-delay: 0s;
}
.loader .loader__tile:nth-child(2) {
  top: calc(1 * 20%);
  transition-delay: 0.2s;
  /*  background:#009393; */

  background: #9ee1f8;
  background: url(../images/image-loaderbg-clouds2.png) center center no-repeat #6d5dbf;
  background-size: cover;

}
.loader .loader__tile:nth-child(3) {
  top: calc(2 * 20%);
  transition-delay: 0.4s;
  background: #66bf90;
  background: url(../images/image-loaderbg-birds.png) center center no-repeat #84c1d5;
  background-size: cover;

}

.loader .loader__tile:nth-child(4) {
  top: calc(3 * 20%);
  transition-delay: 0.6s;
  /*  background:#bdd893; */
  background: url(../images/image-loaderbg-sand-top.png) center center no-repeat #84c1d5;
  background-size: cover;

}
.loader .loader__tile:nth-child(5) {
  top: calc(4 * 20%);
  transition-delay: 0.8s;
  background: url(../images/image-loaderbg-sand.png) center center no-repeat #eadda4;
  background-size: cover;
}
.loader--active {
  width: 100%;
  transition-delay: 0s;
}
.loader--active .loader__icon, .loader--active .spinner-border {
  opacity: 1;
  transition: opacity 0.5s 1.4s ease;
}
.loader--active .loader__tile {
  width: 100%;
}
.loader--active .loader__tile:nth-child(0) {
  transition-delay: -0.2s;
}
.loader--active .loader__tile:nth-child(1) {
  transition-delay: 0s;
}
.loader--active .loader__tile:nth-child(2) {
  transition-delay: 0.2s;
}
.loader--active .loader__tile:nth-child(3) {
  transition-delay: 0.4s;
}
.loader--active .loader__tile:nth-child(4) {
  transition-delay: 0.6s;
}
.loader--active .loader__tile:nth-child(5) {
  transition-delay: 0.8s;
}