Css progress bar

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>
Scroll to Top