I have created an animation that works perfectly in all browsers except for IE and Edge. You can view the page here.
.progress-container {
position: relative;
}
.background-progress-bar, .progress-bar {
width: 100%;
height: 10px;
top: 0px;
left: 0px;
position: absolute;
}
.background-progress-bar {
background-color: pink;
z-index: 8;
}
.progress-bar {
background-color: red;
z-index: 9;
}
.indeterminate {
animation: indeterminate 2.5s infinite linear;
}
@keyframes indeterminate {
0% {
width: 30%;
left: 0%;
}
25% {
width: 50%;
left: 50%;
}
50% {
width: 10%;
left: 0px;
}
75% {
width: 30%;
left: 0%;
}
100% {
width: 0%;
left: calc(100% - 5px);
}
}
<div class="progress-container">
<span class="background-progress-bar">
<span class="progress-bar indeterminate"></span>
</span>
</div>
IE and Edge are not applying the left property, causing the span to remain at the left. I have attempted using the -ms-animation property but it didn't resolve the issue.
Additionally, I have included this meta tag in my index.html file:
<meta http-equiv="X-UA-Compatible" content="IE=edge">