.softe-progress{
  width: 100%;
  max-width: 260px;
  height: 6px;
  background: #e1e4e8;
  border-radius: 3px;
  overflow: hidden;

}
.softe-progress-bar{
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#ffd33d,#ea4aaa 17%,#b34bff 34%,#01feff 51%,#ffd33d 68%,#ea4aaa 85%,#b34bff);
    background-size: 300% 100%;
    animation: progress-animation 2s linear infinite;
  }
    
@keyframes progress-animation{
  0%{
    background-position: 100%;
  }
  100%{
    background-position: 0;
  }
}
.softe-loader {
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3000;
  -webkit-transition: visibility 0s;
  -o-transition: visibility 0s;
  transition: visibility 0s;
}

.softe-loader .softe-loader-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  background-color: #3498db;
  -webkit-transform: scaleY(1);
      -ms-transform: scaleY(1);
          transform: scaleY(1);
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-transition: -webkit-transform 0.6s linear;
  transition: -webkit-transform 0.6s linear;
  -o-transition: transform 0.6s linear;
  transition: transform 0.6s linear;
  transition: transform 0.6s linear, -webkit-transform 0.6s linear;
  
  
  
}

.softe-loader .softe-loader-bar {
  display: inline-block;
  position: relative;
  top: 55%;
  left:0%;
  overflow: hidden;
font-size: 16px;
  color: white;
  -webkit-transition: -webkit-transform 0s linear;
  transition: -webkit-transform 0s linear;
  -o-transition: transform 0s linear;
  transition: transform 0s linear;
  transition: transform 0s linear, -webkit-transform 0s linear;
  -webkit-transform: scaleX(1) translateY(-50%);
      -ms-transform: scaleX(1) translateY(-50%);
          transform: scaleX(1) translateY(-50%);
  -webkit-transform-origin: center right;
      -ms-transform-origin: center right;
          transform-origin: center right;
  z-index: 2;
}

.softe-loader .softe-loader-logo {
  display: inline-block;
  position: relative;
  top: 50%;
  overflow: hidden;

  width: 38px;
  height: 38px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QEbEDgWVNkxcwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAACvklEQVRYw81YQXIUMQzsHqaoDUV+wFvyCrikCp7BmWdw4gJHnrJn3pBK5cQht9A5zNgjyfLsQO2EdaoSx/bYUktqyaYk4gLbCACvPv78BODrMiwADN3S0bxmoz6a13Oz/sen7+9vxvnwAdRhOpvz2Vo2k5bxLQcoEV4ISpk+yzcEiAMADB4kzkKEPuym8ybloNKX/BoHN/0csYzTKqLaH/3CgAjpkaMRkEbbiE6KKvv/JuuH03Zhi5hFsaJnNUeDgJ9Xv2+d38FezUfjBmqtFLUum5fvi2vQx1L116CrG/eCsQOriUYax1XPlPLj9kDnJmWeaYCPSUj5Q6Zo/APgLl+SRO+KazXnMG6I+1awunHjF3dPPz68e3GCbdXjX3HoHm1w0GaclXr9iwpmhND/EyiPykrU3OK9/9Qeef2Z4Je1XHml3zeex2iogJGAztMIjsCUDzu0dPCIqU1p05jOblV12Tpj/kiC2ic6BYFgYgs/MqR5rEaozh4EnA9nQE5d52c0qbw5sY85/W9tyJU7k2tBrpg2Ijfk0ZGZ9/yIaRZQiVHbXBnLXu0hVC6QDJJeMDIrL3cw4yQIV/YemhTk+toBsYISjUG9eX3NL1vFBtI7o3AKZqMTlYmPdfMjd4nGOLaEGZOozC4O2sP12+TEimLksXqpnf+SXeEeef2awFurs6quDKaxaUgg+EZNGKzdkti7V6YGuQXwzZKjNZEnTKXp6NTFYFhB+WQVa501/1Szg3PFJ5TQbsb88QT1yx51Cpj84cXTg+qP97QcMYb7CLOKFjWGFjSiCHQCRPy8WenWY1NUqlfB8rT1A05LWGj1S3aTuMIzUsL+6laiSuYtidLMs3GHTtmzPVfS8TY6Ueepgk3ErufK8nD3AOrYPqrUK/99EO0BwLHHVx4/f6nxpbUyt/g1veNc6BvsgAttz+Kubo/5GdSTAAAAAElFTkSuQmCC');
  
  -webkit-animation: rotateplane 2.2s infinite ease-in-out;
  animation: rotateplane 2.2s infinite ease-in-out;
  
}
.softe-loader .softe-loader-img.s-back-switch {
  visibility: visible;
}

.softe-loader.is-loaded {
  -webkit-transition-delay: 0.6s;
       -o-transition-delay: 0.6s;
          transition-delay: 0.6s;
  visibility: hidden;
}

.softe-loader.is-loaded .softe-loader-wrapper {
  -webkit-transform: scaleY(0);
      -ms-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: center top;
      -ms-transform-origin: center top;
          transform-origin: center top;
}

.softe-loader.is-loaded .softe-loader-img {
  visibility: hidden;
  -webkit-transition: visibility .3s ease-in 0s;
  -o-transition: visibility .3s ease-in 0s;
  transition: visibility .3s ease-in 0s;
}

@media only screen and (max-width: 991px) {
  .softe-loader .softe-loader-bar {
    width: 70%;
  }
}

@media only screen and (max-width: 767px) {
  .softe-loader .softe-loader-bar {
    font-size: 2em;
  }
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: translate(0) scaleX(0);
            transform: translate(0) scaleX(0);
  }
  30% {
    -webkit-transform: translate(0) scaleX(1);
            transform: translate(0) scaleX(1);
  }
  100%, 80% {
    -webkit-transform: translate(100%) scaleX(0);
            transform: translate(100%) scaleX(0);
  }
}

@keyframes loading {
  0% {
    -webkit-transform: translate(0) scaleX(0);
            transform: translate(0) scaleX(0);
  }
  30% {
    -webkit-transform: translate(0) scaleX(1);
            transform: translate(0) scaleX(1);
  }
  100%, 80% {
    -webkit-transform: translate(100%) scaleX(0);
            transform: translate(100%) scaleX(0);
  }
}

@-webkit-keyframes scaleout-image {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

@keyframes scaleout-image {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
            transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.8;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}