I am making a simple progress bar using <progress>
, but I have an error when I add animation to it, it goes on long and does not respect thewidth: 100px;
progress {
border: none;
border-radius: 2rem;
width: 100%;
height: 9px;
animation: prog 2s linear;
}
::-webkit-progress-bar-value {background-color: #1DA1F2; border-radius: 2rem;}
::-webkit-progress-value {background-color: #1DA1F2; border-radius: 2rem;}
::-moz-progress-bar {background-color: #1DA1F2; border-radius: 2rem;}
@keyframes prog {
0% {width: 0%; background-color: #f1f1f1;}
100% {width: 100% color: #000;}
}
<progress max="100" value="76"></progress>
I modified the code trying to make it work and well, for now it works... but the example below is better...
Hello, the problem is that you are changing the Width of the label
progress
, what you have to do is increase the value of the attributevalue
.What you want is to achieve an effect like this using only CSS
For academic purposes only, and while I know it's not the answer you need, I noticed that given a progress element that is undetermined (no value) the width of the pseudo element can be animated
::-moz-progress-bar
, but webkit pseudo elements retain their initial style and ignore to the animations. Neither the progress bar nor the progress value.However, having said that, these pseudo-elements do support transitions. But as you may know, a transition occurs when an element undergoes a state change such as the addition of a class. (or a pseudo-class like :hover).
The following works in both Chrome and Firefox:
But we return to the two initial problems:
Actually I don't think there is a way to do it with pure CSS. The alternative would be to combine what Csharls tells you with a bit of javascript to update the "pseudo-progress" according to the variation of the real value of the bar, which would be hidden.
Edit
Excuse the gross... I edited the code snippet to do an experiment and stepped on what I had done before. Now I reset it.