
.xcp-progressbar {
	display: block;
	position: fixed;
	width: 100%;
	height: 3px;
	top: 57px;
	left: 0px;
	z-index: 1002;
	background-color: rgba(255, 255, 255, 0.4);
}

.xcp-progressbar .xcp-container {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 3px;
	-webkit-transform: translate(0, 0) scale(1, 1);
	transform: translate(0, 0) scale(1, 1);
}

.xcp-progressbar .xcp-container .xcp-bar {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
}

.xcp-progressbar .xcp-container .xcp-dashed:before {
	content: "";
	display: none;
	position: absolute;
	margin-top: 0;
	height: 5px;
	width: 100%;
	background-color: transparent;
	background-size: 10px 10px !important;
	background-position: 0px -23px;
}

.xcp-progressbar .xcp-container .xcp-bar1, .xcp-progressbar .xcp-container .xcp-bar2 {
	-webkit-transition: -webkit-transform 0.2s linear;
	transition: -webkit-transform 0.2s linear;
	transition: transform 0.2s linear;
	transition: transform 0.2s linear, -webkit-transform 0.2s linear;
	background-color: rgba(255, 255, 255, 0.9);
}

.xcp-progressbar .xcp-container.xcp-mode-indeterminate .xcp-bar1 {
	-webkit-animation: xcp-progressbar-indeterminate-scale-1 4s infinite, xcp-progressbar-indeterminate-1 4s infinite;
	animation: xcp-progressbar-indeterminate-scale-1 4s infinite, xcp-progressbar-indeterminate-1 4s infinite;
}

.xcp-progressbar .xcp-container.xcp-mode-indeterminate .xcp-bar2 {
	-webkit-animation: xcp-progressbar-indeterminate-scale-2 4s infinite, xcp-progressbar-indeterminate-2 4s infinite;
	animation: xcp-progressbar-indeterminate-scale-2 4s infinite, xcp-progressbar-indeterminate-2 4s infinite;
}


@-webkit-keyframes xcp-progressbar-indeterminate-scale-1 {
  0% {
    -webkit-transform: scaleX(0.1);
            transform: scaleX(0.1);
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear; 
  }
  36.6% {
    -webkit-transform: scaleX(0.1);
            transform: scaleX(0.1);
    -webkit-animation-timing-function: cubic-bezier(0.33473, 0.12482, 0.78584, 1);
            animation-timing-function: cubic-bezier(0.33473, 0.12482, 0.78584, 1); 
  }
  69.15% {
    -webkit-transform: scaleX(0.83);
            transform: scaleX(0.83);
    -webkit-animation-timing-function: cubic-bezier(0.22573, 0, 0.23365, 1.37098);
            animation-timing-function: cubic-bezier(0.22573, 0, 0.23365, 1.37098); 
  }
  100% {
    -webkit-transform: scaleX(0.1);
            transform: scaleX(0.1); 
  }
}

@keyframes xcp-progressbar-indeterminate-scale-1 {
  0% {
    -webkit-transform: scaleX(0.1);
            transform: scaleX(0.1);
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear; 
  }
  36.6% {
    -webkit-transform: scaleX(0.1);
            transform: scaleX(0.1);
    -webkit-animation-timing-function: cubic-bezier(0.33473, 0.12482, 0.78584, 1);
            animation-timing-function: cubic-bezier(0.33473, 0.12482, 0.78584, 1); 
  }
  69.15% {
    -webkit-transform: scaleX(0.83);
            transform: scaleX(0.83);
    -webkit-animation-timing-function: cubic-bezier(0.22573, 0, 0.23365, 1.37098);
            animation-timing-function: cubic-bezier(0.22573, 0, 0.23365, 1.37098); 
  }
  100% {
    -webkit-transform: scaleX(0.1);
            transform: scaleX(0.1); 
  } 
}

@-webkit-keyframes xcp-progressbar-indeterminate-1 {
  0% {
    left: -105.16667%;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear; 
  }
  20% {
    left: -105.16667%;
    -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582);
            animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582); 
  }
  69.15% {
    left: 21.5%;
    -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635);
            animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635); 
  }
  100% {
    left: 95.44444%; 
  }
}

@keyframes xcp-progressbar-indeterminate-1 {
  0% {
    left: -105.16667%;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }
  20% {
    left: -105.16667%;
    -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582);
            animation-timing-function: cubic-bezier(0.5, 0, 0.70173, 0.49582);
  }
  69.15% {
    left: 21.5%;
    -webkit-animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635);
            animation-timing-function: cubic-bezier(0.30244, 0.38135, 0.55, 0.95635);
  }
  100% {
    left: 95.44444%;
  }
}

@-webkit-keyframes xcp-progressbar-indeterminate-scale-2 {
  0% {
    -webkit-transform: scaleX(0.1);
            transform: scaleX(0.1);
    -webkit-animation-timing-function: cubic-bezier(0.20503, 0.05705, 0.57661, 0.45397);
            animation-timing-function: cubic-bezier(0.20503, 0.05705, 0.57661, 0.45397); 
  }
  19.15% {
    -webkit-transform: scaleX(0.57);
            transform: scaleX(0.57);
    -webkit-animation-timing-function: cubic-bezier(0.15231, 0.19643, 0.64837, 1.00432);
            animation-timing-function: cubic-bezier(0.15231, 0.19643, 0.64837, 1.00432);
  }
  44.15% {
    -webkit-transform: scaleX(0.91);
            transform: scaleX(0.91);
    -webkit-animation-timing-function: cubic-bezier(0.25776, -0.00316, 0.21176, 1.38179);
            animation-timing-function: cubic-bezier(0.25776, -0.00316, 0.21176, 1.38179);
  }
  100% {
    -webkit-transform: scaleX(0.1);
            transform: scaleX(0.1);
  }
}

@keyframes xcp-progressbar-indeterminate-scale-2 {
  0% {
    -webkit-transform: scaleX(0.1);
            transform: scaleX(0.1);
    -webkit-animation-timing-function: cubic-bezier(0.20503, 0.05705, 0.57661, 0.45397);
            animation-timing-function: cubic-bezier(0.20503, 0.05705, 0.57661, 0.45397);
  }
  19.15% {
    -webkit-transform: scaleX(0.57);
            transform: scaleX(0.57);
    -webkit-animation-timing-function: cubic-bezier(0.15231, 0.19643, 0.64837, 1.00432);
            animation-timing-function: cubic-bezier(0.15231, 0.19643, 0.64837, 1.00432);
  }
  44.15% {
    -webkit-transform: scaleX(0.91);
            transform: scaleX(0.91);
    -webkit-animation-timing-function: cubic-bezier(0.25776, -0.00316, 0.21176, 1.38179);
            animation-timing-function: cubic-bezier(0.25776, -0.00316, 0.21176, 1.38179);
  }
  100% {
    -webkit-transform: scaleX(0.1);
            transform: scaleX(0.1);
  }
}           

@-webkit-keyframes xcp-progressbar-indeterminate-2 {
  0% {
    left: -54.88889%;
    -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40968);
            animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40968);
  }
  25% {
    left: -17.25%;
    -webkit-animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73372);
            animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73372);
  }
  48.35% {
    left: 29.5%;
    -webkit-animation-timing-function: cubic-bezier(0.4, 0.62703, 0.6, 0.90203);
            animation-timing-function: cubic-bezier(0.4, 0.62703, 0.6, 0.90203);
   }
  100% {
    left: 117.38889%;
  }
}

@keyframes xcp-progressbar-indeterminate-2 {
  0% {
    left: -54.88889%;
    -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40968);
            animation-timing-function: cubic-bezier(0.15, 0, 0.51506, 0.40968);
  }
  25% {
    left: -17.25%;
    -webkit-animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73372);
            animation-timing-function: cubic-bezier(0.31033, 0.28406, 0.8, 0.73372);
  }
  48.35% {
    left: 29.5%;
    -webkit-animation-timing-function: cubic-bezier(0.4, 0.62703, 0.6, 0.90203);
            animation-timing-function: cubic-bezier(0.4, 0.62703, 0.6, 0.90203);
  }
  100% {
    left: 117.38889%;
  }
}