get color from gradient by percentage

[Tcll]

so what I'm trying to do is build a progress bar using basic page elements with CSS.
http://tcll5850.proboards.com/thread/249/post-progress-bars-development
what I want to do is set a solid color selected multiple colors in a gradient based off the percent completed.
how can I do this??

I'm thinking to provide a hidden DIV styled with the gradient which I can get the current pixel position color from...
but I'm not sure how to do that...

I don't have any code yet...
the display is done using <span> and CSS ([class] and [style] provided by a plugin)

thanks :)

this is just a gradient fill isn't it?

This could be done in many ways. A gradient-fill element that grows on a static background or a gradient-fill background with a receding foreground, giving the illusion of a growing bar. The latter may be easier as the gradient pattern will be consistent and the end of the growth (100%) can show rounded corners. Otherwise, you may have to do quite a bit of js fiddling to get it to look smooth.

[Tcll]

well, the bar is controlled via 2 classes... FG and BG...

I'm using 3 linear gradients (2 for the FG)

I want to modify the FG to have a solid color based on a current position in the main gradient:

start color: red
end color: green

value: 50 (max 100)

final FG color: yellow

keep in mind though you will be allowed to use more than just 2 colors.
(I'm still working on a decent implementation for this)
^ I only just now got a better idea