CODEWITHSUNDEEP
cssprogress-barcss-transitions
Angelos Chalaris
Angelos Chalaris

Reputation: 6707

Transition for progress element on value change

I am trying to add a transition to the progress element using CSS, so that when the value of it changes, it will move the progress bar inside the container smoothly. What I am having trouble with is getting the transition to work at all and I have no idea where to put such a transition, as there is nothing like :hover for example when the value changes (not that I know of). So is what I am trying to do even possible and, if so, how?

Code snippet below:

progress {
  display: block;
  vertical-align: baseline;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  width: 100%;
  margin: 1px auto;
  height: 10px;
  background: yellow;
  transition: all 5s ease 0; /* Does not work */
}
  progress[value]::-webkit-progress-value {
    background: red;
    transition: all 5s ease 0; /* Does not work */
  }
  progress[value]::-webkit-progress-bar {
    background: yellow;
    transition: all 5s ease 0; /* Does not work */
  }
  progress[value]::-moz-progress-bar {
    background: red;
    transition: all 5s ease 0; /* Does not work */
  }
<h3>Progress bar with transition</h3>
<progress id="test-prog" value="25" max="100"></progress>
  <br>
   <button onclick="document.getElementById('test-prog').setAttribute('value',parseInt(document.getElementById('test-prog').getAttribute('value'))+5);">Click me to see the progress bar value change</button>

Upvotes: 3

Views: 3791

Answers (2)

Ahmad Alfy
Ahmad Alfy

Reputation: 13381

I know this is an old question but I found a way to animate value change in chrome using

::-webkit-progress-value {
  transition: width 1s;
}

Source: Animating Progress

Upvotes: 5

Narxx
Narxx

Reputation: 8309

I don't think you can give transition to the value of <progress> element.

It's being drawn via the operating system, and not via CSS (that's why it looks different in different operating systems - like the scroll bar).

If you want, you can implement your own HTML+CSS progress bar, and give it transitions.

Example: http://codepen.io/mcraiganthony/pen/waaeWO

Upvotes: 4

Related Questions