Only one CSS animation bar at any point of time - html

Question

I am using CSS animation to show an indeterminate progress bar. Refer code below. If you'll notice there are 2 moving gradient at any point of time, i.e. when the 1st one reaches 50% of the width, 2nd one starts. I know that I have defined the css that way using webkit-background-size(50% and 100%). However what I am not able to do is make sure that there should be only 1 moving part at any point of time - i.e. once the animation reaches the right end of the div only then it should start it from the left end. Any pointers on this?
Refer https://jsfiddle.net/AnuragSinha/nuokygpe/1/ and corresponding code below.
#-webkit-keyframes moving-gradient {
0% { background-position: left bottom; }
100% { background-position: right bottom; }
}
.loading-gradient {
width: 200px;
height: 30px;
background: -webkit-linear-gradient(
left,
#e9e9e9 50%,
#eeefef 100%
) repeat;
-webkit-background-size: 50% 100%;
-webkit-animation-name: moving-gradient;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
<div class="loading-gradient" style="width: 200px; height: 30px"> </div>

Answer 1

Instead of making the gradient 50% make it 200% and define 2 gradient coloration inside it. Doing so each part of the gradient will cover exactly 100% of the element width then you can animation it from left to right.
.loading-gradient {
width: 200px;
height: 30px;
background: linear-gradient(to left,
#e9e9e9 0% 25%, #eeefef 50%, /* first one take the half*/
#e9e9e9 50% 75%, #eeefef 100%); /* second one take the other half*/
background-size: 200% 100%;
animation: moving-gradient 1s linear infinite;
}
#keyframes moving-gradient {
0% {
background-position: right;
}
/*100% {
background-position: left; /* No need to define this since it's the default value*/
}*/
}
<div class="loading-gradient" style="width: 200px; height: 30px"> </div>
Since the gradient is now having a size bigger than the container, you need to do the opposite animation (from right to left).
More details: Using percentage values with background-position on a linear gradient
Here is another idea where you can consider pseudo element and translate animation:
.loading-gradient {
width: 200px;
height: 30px;
position:relative;
z-index:0;
overflow:hidden;
}
.loading-gradient:before {
content:"";
position:absolute;
z-index:-1;
top:0;
right:0;
width:200%;
bottom:0;
background: linear-gradient(to left, #e9e9e9 50%, #eeefef 100%);
background-size: 50% 100%;
animation: moving-gradient 1s linear infinite;
}
#keyframes moving-gradient {
100% {
transform: translate(50%);
}
}
<div class="loading-gradient" style="width: 200px; height: 30px"> </div>