The bar looks right. Why won't the animation work? - css

Question

I'm new to animation. I pick some code up that had a demo that worked in the 5 browsers I'm testing in. I'm on Windows 10 and have the latest versions of the 5 browsers I test in (Chrome, FF, edge IE, and Opera. The CSS follows.
.progress-bar {
margin-bottom: 1rem;
background-color: tomato;
border-radius: 1.25em;
width: 300px;
height: 16px;
display: inline-block;
}
.progress-value {
background-color: MEDIUMBLUE;
transition: 0.3s all linear;
border-radius: 1.25em;
height: 16px;
display: inline-block;
animation: progress 3s ease-in-out forwards;
-webkit-animation: progress 3s ease-in-out forwards;
}
.progress-value.green {
background-color: MEDIUMSEAGREEN;
animation: progress-3 3s ease-in-out forwards;
-webkit-animation: progress-3 3s ease-in-out forwards;
}
.progress-value.red {
background-color: TOMATO;
animation: progress-2 3s ease-in-out forwards;
-webkit-animation: progress-2 3s ease-in-out forwards;
}
/* animation */
#keyframes progress {
from {
width: 0;
}
to {
width: 55%;
}
}
#-webkit-keyframes progress {
from {
width: 0;
}
to {
width: 55%;
}
}
#keyframes progress-2 {
from {
width: 0;
}
to {
width: 70%;
}
}
#-webkit-keyframes progress-2 {
from {
width: 0;
}
to {
width: 70%;
}
}
#keyframes progress-3 {
from {
width: 0;
}
to {
width: 90%;
}
}
#-webkit-keyframes progress-3 {
from {
width: 0;
}
to {
width: 90%;
}
}
<DIV ID='dvLoading' STYLE='POSITION:relative;TOP:-300px;LEFT:30%;'>
<DIV class='progress-bar'>
<DIV class='progress-value' style='WIDTH:70%;'></DIV>
</DIV>
</DIV>
The bar looks like I hoped. But there is no animation in any of the 5 browsers.

Answer 1

Here's working and better code for you. Instead of creating animation for each progress value, change width of child and show indicator inside the child and animate it once (from width: 0% to width: 100% width). I created a simple animating progress bar with 4 color variants.
.progress {
width: 500px;
height: 30px;
border-radius: 15px;
overflow: hidden;
background: #eee;
position: relative;
}
.progress>.progress-value {
position: relative;
height: 100%;
left: 0;
top: 0;
}
.progress>.progress-value::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
animation: progress-value 3s ease-in-out forwards;
-webkit-animation: progress-value 3s ease-in-out forwards;
background: #666;
}
.progress>.progress-value.red::before {
background: #f44;
}
.progress>.progress-value.green::before {
background: #3f4;
}
.progress>.progress-value.blue::before {
background: #54f;
}
#keyframes progress-value {
from {
width: 0%;
}
to {
width: 100%;
}
}
#-webkit-keyframes progress-value {
from {
width: 0%;
}
to {
width: 100%;
}
}
<div class="progress">
<div class="progress-value" style="width: 65%"></div>
</div>
<div style="height: 15px"></div>
<div class="progress">
<div class="progress-value red" style="width: 95%"></div>
</div>
<div style="height: 15px"></div>
<div class="progress">
<div class="progress-value green" style="width: 41%"></div>
</div>
<div style="height: 15px"></div>
<div class="progress">
<div class="progress-value blue" style="width: 14%"></div>
</div>

Answer 2

What I did that works as I hoped is that I load the indicator as an HTML file into an object in the CGI process and position that object at the V/H center of the iframe. I put a 1 second lag in the JavaScript that's executed when the IFRAME content is loaded (ONLOAD) to turn the indicator off, to ensure that at least a little of the indicator is seen on a real fast load. Thanks all. ct