ec-loader {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 9900;
  /*background-color: #022535;*/
  background-color: rgba(2, 37, 53, 0.6);
  opacity: 0;
  cursor: progress;
  overflow: hidden;
}

ec-loader.ec_loading_appear {
  animation: appear 0.5s normal forwards;
  animation-delay: 0s;
}

ec-loader.ec_loading_disappear {
  animation: disappear 0.5s normal forwards;
  animation-delay: 0s;
}

ec-loader .loader {
  /*    
      position: absolute;
      top: 50%;
      left: 50%;
  */
  width: 3.6666666667em;
  height: 3.6666666667em;
  /*    
      margin-left: -$loaderSize/2;
      margin-top: -$loaderSize/2;
  */
}

ec-loader .loader-block {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  opacity: 0;
  width: 1em;
  height: 1em;
}

ec-loader .loader-message {
  color: #ceeaf6;
  font-size: 14px;
}

ec-loader .loader-percentage {
  color: white;
  font-size: 16px;
}

ec-loader .loader-block:nth-child(1) {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  background: #ceeaf6;
  -webkit-animation: show 0.88s step-end infinite alternate, pulse1 0.88s linear infinite alternate;
  animation: show 0.88s step-end infinite alternate, pulse1 0.88s linear infinite alternate;
  -webkit-animation-delay: 0.065s;
  animation-delay: 0.065s;
}

ec-loader .loader-block:nth-child(2) {
  -webkit-transform: translate(1.3333333333em, 0);
  -moz-transform: translate(1.3333333333em, 0);
  -ms-transform: translate(1.3333333333em, 0);
  -o-transform: translate(1.3333333333em, 0);
  transform: translate(1.3333333333em, 0);
  background: #ffffff;
  -webkit-animation: show 0.88s step-end infinite alternate, pulse2 0.88s linear infinite alternate;
  animation: show 0.88s step-end infinite alternate, pulse2 0.88s linear infinite alternate;
  -webkit-animation-delay: 0.13s;
  animation-delay: 0.13s;
}

ec-loader .loader-block:nth-child(3) {
  -webkit-transform: translate(2.6666666667em, 0);
  -moz-transform: translate(2.6666666667em, 0);
  -ms-transform: translate(2.6666666667em, 0);
  -o-transform: translate(2.6666666667em, 0);
  transform: translate(2.6666666667em, 0);
  background: #ceeaf6;
  -webkit-animation: show 0.88s step-end infinite alternate, pulse3 0.88s linear infinite alternate;
  animation: show 0.88s step-end infinite alternate, pulse3 0.88s linear infinite alternate;
  -webkit-animation-delay: 0.195s;
  animation-delay: 0.195s;
}

ec-loader .loader-block:nth-child(4) {
  -webkit-transform: translate(0, 1.3333333333em);
  -moz-transform: translate(0, 1.3333333333em);
  -ms-transform: translate(0, 1.3333333333em);
  -o-transform: translate(0, 1.3333333333em);
  transform: translate(0, 1.3333333333em);
  background: #ffffff;
  -webkit-animation: show 0.88s step-end infinite alternate, pulse4 0.88s linear infinite alternate;
  animation: show 0.88s step-end infinite alternate, pulse4 0.88s linear infinite alternate;
  -webkit-animation-delay: 0.325s;
  animation-delay: 0.325s;
}

ec-loader .loader-block:nth-child(5) {
  -webkit-transform: translate(1.3333333333em, 1.3333333333em);
  -moz-transform: translate(1.3333333333em, 1.3333333333em);
  -ms-transform: translate(1.3333333333em, 1.3333333333em);
  -o-transform: translate(1.3333333333em, 1.3333333333em);
  transform: translate(1.3333333333em, 1.3333333333em);
  background: #ffffff;
  -webkit-animation: show 0.88s step-end infinite alternate, pulse5 0.88s linear infinite alternate;
  animation: show 0.88s step-end infinite alternate, pulse5 0.88s linear infinite alternate;
  -webkit-animation-delay: 0.13s;
  animation-delay: 0.13s;
}

ec-loader .loader-block:nth-child(6) {
  -webkit-transform: translate(2.6666666667em, 1.3333333333em);
  -moz-transform: translate(2.6666666667em, 1.3333333333em);
  -ms-transform: translate(2.6666666667em, 1.3333333333em);
  -o-transform: translate(2.6666666667em, 1.3333333333em);
  transform: translate(2.6666666667em, 1.3333333333em);
  background: #fdfdfd;
  -webkit-animation: show 0.88s step-end infinite alternate, pulse6 0.88s linear infinite alternate;
  animation: show 0.88s step-end infinite alternate, pulse6 0.88s linear infinite alternate;
  -webkit-animation-delay: 0.455s;
  animation-delay: 0.455s;
}

ec-loader .loader-block:nth-child(7) {
  -webkit-transform: translate(0, 2.6666666667em);
  -moz-transform: translate(0, 2.6666666667em);
  -ms-transform: translate(0, 2.6666666667em);
  -o-transform: translate(0, 2.6666666667em);
  transform: translate(0, 2.6666666667em);
  background: #fdfdfd;
  -webkit-animation: show 0.88s step-end infinite alternate, pulse7 0.88s linear infinite alternate;
  animation: show 0.88s step-end infinite alternate, pulse7 0.88s linear infinite alternate;
  -webkit-animation-delay: 0.39s;
  animation-delay: 0.39s;
}

ec-loader .loader-block:nth-child(8) {
  -webkit-transform: translate(1.3333333333em, 2.6666666667em);
  -moz-transform: translate(1.3333333333em, 2.6666666667em);
  -ms-transform: translate(1.3333333333em, 2.6666666667em);
  -o-transform: translate(1.3333333333em, 2.6666666667em);
  transform: translate(1.3333333333em, 2.6666666667em);
  background: #ceeaf6;
  -webkit-animation: show 0.88s step-end infinite alternate, pulse8 0.88s linear infinite alternate;
  animation: show 0.88s step-end infinite alternate, pulse8 0.88s linear infinite alternate;
  -webkit-animation-delay: 0.26s;
  animation-delay: 0.26s;
}

ec-loader .loader-block:nth-child(9) {
  -webkit-transform: translate(2.6666666667em, 2.6666666667em);
  -moz-transform: translate(2.6666666667em, 2.6666666667em);
  -ms-transform: translate(2.6666666667em, 2.6666666667em);
  -o-transform: translate(2.6666666667em, 2.6666666667em);
  transform: translate(2.6666666667em, 2.6666666667em);
  background: #ffffff;
  -webkit-animation: show 0.88s step-end infinite alternate, pulse9 0.88s linear infinite alternate;
  animation: show 0.88s step-end infinite alternate, pulse9 0.88s linear infinite alternate;
  -webkit-animation-delay: 0.065s;
  animation-delay: 0.065s;
}

@-webkit-keyframes pulse1 {
  from, 40% {
    background: #ceeaf6;
  }
  to {
    background: #f3fdff;
  }
}
@keyframes pulse1 {
  from, 40% {
    background: #ceeaf6;
  }
  to {
    background: #f3fdff;
  }
}
@-webkit-keyframes pulse2 {
  from, 40% {
    background: #ffffff;
  }
  to {
    background: #6bbfe5;
  }
}
@keyframes pulse2 {
  from, 40% {
    background: #ffffff;
  }
  to {
    background: #6bbfe5;
  }
}
@-webkit-keyframes pulse3 {
  from, 40% {
    background: #ceeaf6;
  }
  to {
    background: #02d376;
  }
}
@keyframes pulse3 {
  from, 40% {
    background: #ceeaf6;
  }
  to {
    background: #02d376;
  }
}
@-webkit-keyframes pulse4 {
  from, 40% {
    background: #ffffff;
  }
  to {
    background: #ff1d25;
  }
}
@keyframes pulse4 {
  from, 40% {
    background: #ffffff;
  }
  to {
    background: #ff1d25;
  }
}
@-webkit-keyframes pulse5 {
  from, 40% {
    background: #ffffff;
  }
  to {
    background: #fcee21;
  }
}
@keyframes pulse5 {
  from, 40% {
    background: #ffffff;
  }
  to {
    background: #fcee21;
  }
}
@-webkit-keyframes pulse6 {
  from, 40% {
    background: #fdfdfd;
  }
  to {
    background: #dadada;
  }
}
@keyframes pulse6 {
  from, 40% {
    background: #fdfdfd;
  }
  to {
    background: #dadada;
  }
}
@-webkit-keyframes pulse7 {
  from, 40% {
    background: #fdfdfd;
  }
  to {
    background: #dadada;
  }
}
@keyframes pulse7 {
  from, 40% {
    background: #fdfdfd;
  }
  to {
    background: #dadada;
  }
}
@-webkit-keyframes pulse8 {
  from, 40% {
    background: #ceeaf6;
  }
  to {
    background: #f3fdff;
  }
}
@keyframes pulse8 {
  from, 40% {
    background: #ceeaf6;
  }
  to {
    background: #f3fdff;
  }
}
@-webkit-keyframes pulse9 {
  from, 40% {
    background: #ffffff;
  }
  to {
    background: #6bbfe5;
  }
}
@keyframes pulse9 {
  from, 40% {
    background: #ffffff;
  }
  to {
    background: #6bbfe5;
  }
}
@-webkit-keyframes show {
  from, 40% {
    opacity: 0;
  }
  41%, to {
    opacity: 1;
  }
}
@keyframes show {
  from, 40% {
    opacity: 0;
  }
  41%, to {
    opacity: 1;
  }
}
@keyframes appear {
  0% {
    opacity: 0;
    width: 100%;
  }
  100% {
    opacity: 1;
    width: 100%;
  }
}
@keyframes disappear {
  0% {
    width: 100%;
    opacity: 1;
  }
  99% {
    width: 100%;
  }
  100% {
    width: 0%;
    opacity: 0;
  }
}