I'm trying to make a "progress bar" with animation that changes the background colour of the bar.

The bar should start with red at 0% and as it progresses across the element it changes to green at 100%. I've got this working for 100% (and no, the colour is not great, but that's a future problem)...

```js
setTimeout(function(){
  var bar = document.getElementById("bar");
  bar.style.width = "100%";
  bar.classList.add("show");
},10);
```

```css
#progress {
  border:1px solid #888;
  background-color:#eee;
  height:
  width:100%;
}
#bar {
  height:30px;
  background-color:red;
  width:0;
  transition: all ease 1s;
}
#bar.show {
  background-color:lightgreen;
}
```

```html
<div id="progress"><div id="bar"></div></div>
```

The problem is that (for example) at 50% I cannot get the bar to "stop" at the 50% transition state between the red and the green.

**Is there a way to either calculate the colour as it would be at 50% or get CSS to stop the transition at a particular point?**

You can see what happens if I have a 50% value... where it still goes all the way to green but stops at the 50% width, but what I want it to do is stop at the 50% transition colour (i.e. going from red to mid-way between red and green)...

```js
setTimeout(function(){
  var bar = document.getElementById("bar");
  bar.style.width = "50%";
  bar.classList.add("show");
},10);
```

```css
#progress {
  border:1px solid #888;
  background-color:#eee;
  height:
  width:100%;
}
#bar {
  height:30px;
  background-color:red;
  width:0;
  transition: all ease 1s;
}
#bar.show {
  background-color:lightgreen;
}
```

```html
<div id="progress"><div id="bar"></div></div>
```

**Additional Info** (as requested by `0stone0`) the percentage value will not be known at the time the page is loaded, but will be provided via an AJAX call.