jQuery Health Meter / Progress Bar

jQuery Health Meter / Progress Bar

Hi there,

So, I'm creating a health meter with CSS and HTML.

I have two divs; the outer one is the background, and the inner one is the actual health. The outer div has a fixed width (let's say 200px), and the width of the inner div is set in percentage—thus, when it's 50%, it fills out 50% of the outer div.

  1. <div id="outer">
  2. <div id="inner"></div>
  3. </div>

I'd like to be able to let the percentage number be a variable that can be targeted from jQuery, so that I can define the width from within jQuery.

The background color of the inner div should also change according to the percentage (green at 100%, yellow at 50%, red at 10%, etc).

How is this possible?