A few times, I've seen links to tutorials on how to add health bars in Quest; normally involving turnscripts or javascript to keep them updated.

I just started thinking about what would be a much simpler way to do it. And I tried adding a health bar using the standard status attributes.

Just add health to status attributes, and instead of setting the format to Health: !% or similar, I set it to:

<span style="display: block; position: relative; width: 100%; background-color: red; overflow: hidden;"><span style="display: block; position: absolute; top: 0px; left: 0px; width: !%; height: 100%; background-color: green;" /><span style="position: relative">Health: !%</span></span>

This seems to work just fine for me.
Not sure if it's been done before, but if not I hope someone will find it useful.

Is this for that other guy's survival thread?

No; just a simpler way to give a graphical representation of a percentile attribute.

Pykrete got me thinking now, wondering if it would be easy to include status bars in the status attributes pane.

I'm thinking something like…

$(function () {
  var statusAttributes = {};
  updateStatus = function (text) {
    var oldAttributes = statusAttributes;
    statusAttributes = {};
    $.each(text.split("<br/>"), function (i, attr) {
      var results = this.match(/^((\W*[\w\s]+).*?)(?:(\d+)\s*(%|\/\s*\d+)\s*(?:\[\[(.*?)(?:\|\|(.*?))?\]\])?\s*(.*))?$/);
      var pre = results[1];
      var attrName = results[2].replace(/\s/g,"");
      var value = results[3];
      var max = results[4];
      var realmax = max.replace(/\D/g,"") || 100;
      var colour1 = results[5];
      var colour2 = results[6];
      var post = results[7];
      var bar = oldAttributes[attrName];
      if (bar) { delete oldAttributes[attrName]; }
      var result;
      if (value) {
        if (bar && bar.length) {
          result = bar;
        } else {
          bar = result = $('<span>', {id: 'status_'+attrName,class:'container'}).css({display:'block',position:'relative';width:'100%',overflow:'hidden',backgroundColor:'red'}).appendTo('#statusVars');
          $('<span>', {class: 'slider'}).css({display:'block',position:'absolute',top:0,left:0,height:'100%',backgroundColor:green,width:(value*100/top)+"%"}).appendTo(bar);
          $('<span>', {class: 'label'}).css({position:'relative'}).appendTo(bar);
          $('<span>', {class: 'max'}).css({position:'absolute',top:0,right:0}).appendTo(bar);
        }
        bar.find('.slider').animate({width: bar.find(".container").innerWidth() * value / (realmax || bar.data('max'))});
        if (colour1) { bar.find('.slider').css({backgroundColor: colour1}); }
        if (colour2) { bar.find('.container').css({backgroundColor: colour2}); }
        if (post) {
          bar.find('.max').hide();
          bar.find('.label').html(pre + " " + value + max + " " + post);
        } else {
          bar.find('.label').html(pre + " " + value);
          bar.find('.max').show().html(realmax);
        }
      } else if (bar && bar.length) {
        result = bar;
        bar.html(this);
      } else {
        result = $('<span>', {id: 'status_'+attrName}).css('display','block').appendTo('#statusVars').html(this);
      }
      statusAttributes[attrName] = result;
    });
    $.each(oldAttributes, function () {
      $(this).remove();
    });
  };
});

(off the top of my head; probably full of bugs. Included in your UI initialisation, it should mean that in your status attributes, a line like:

Hit Points: 36/38

or

Battery Level: 74% [[yellow||black]]

will automatically get turned into a little (animated!) bar in the specified colours (green/red default)

I wish you luck on your project mrangel!