Creating a dynamic Tank level/meter using html and css

Question

I am currently having problems creating a \'tank gauging system\' within my project. I am using MVC and the by using the following markup, I have achieved this:

Answer 1

Although @web-tiki answer is perfectly good and accepted, I thought I must add another option for simple use-cases.

The following might not have been available or widely adopted at the time of the question, as it involves the HTMl5 tag

If the pseudo-3d effect is not a must, you could use the not-so-known HTML5 built in element. I have used it occasionally in the past.

basic syntax :

    at 50/100

It is basically designed for such tasks, The only thing that you need to do is to rotate it 90 ( or 270 ) degrees. and for that you could use CSS. ( Fiddle )

It is also easily styled. other examples here and here.

of course it will not produce the same exact effect out-of-the-box ( like the accepted answer ) but I think it is still an option worth mentioning for future users who will bump into this question. ( and with some transparent-png overlay, it can actually be exactly the same.. )

For the JS part, a simple document.getElementById('fuel').setAttribute('value', myValue); should do the trick.

Another somewhat related SO question with nice fiddle to demonstrate dynamic control : how to change values?