Question:
I am making a simple progress bar using <progress>
, but I have an error when I add animation to it, it is still long and it does not respect the width: 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 get it to work and well, for now it works … but the example below is better …
Answer:
Hi the problem is that these by changing the width (width) of the label progress
, you have to do is increase the value of the attribute value
.
What you want is to achieve an effect like this using only CSS
.barra {
height: 20px;
position: relative;
background: #555;
border-radius: 25px;
padding: 10px;
}
.barra > span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: #22AA11;
position: relative;
overflow: hidden;
animation: prog 2s linear;
}
@keyframes prog {
0% {width: 0%}
100% {width: 100%}
}
<div class="barra">
<span style="width: 25%"></span>
</div>