• Loading jQuery UI
• Loading jQuery UI CSS
• The background image needs the full path URL, it is currently "images/pbar-ani.gif" (a relative path).

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

• Go to this site: http://jqueryui.com/themeroller/
• Click on the Gallery tab and finding a theme you like.
• Replace the name (in blue) in the code above with the name of the theme you selected... make the name all lower case and replace all spaces with a dash, so "Le Frog" would become "le-frog". Then replace "ui-darkness" above with that name.

<style type="text/css">
 .ui-progressbar { height:1em; text-align: left; }
 .ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
 .ui-widget { font-family: Segoe UI, Arial, sans-serif; font-size: 1.1em; }
 .ui-widget-content { border: 1px solid #444444; background: #333333 url() 50% bottom repeat-x; color: #ffffff; }
 .ui-widget-content a { color: #ffffff; }
 .ui-widget-header { border: 1px solid #333333; background: #771cc1 url(http://www.axiomfiles.com/Files/258012/bar.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
 .ui-corner-all { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
</style>
<script type="text/javascript">
  $(function(){
    var pb = {
      // Name : [ level, % 333+ gear, % 346+ gear ] - do not include the % sign
      // Joe : [ 85, 100, 50 ]
      // Tanks
      Begone    : [ 82, 0, 0 ],
      Loran     : [ 82, 0, 0 ],
      // Healers
      Anjel     : [ 83, 0, 0 ],
      Creechy   : [ 80, 0, 0 ],
      Dachia    : [ 80, 0, 0 ],
      Dreadrose : [ 80, 0, 0 ],
      Teeyani   : [ 80, 0, 0 ],
      // DPS
      Bratessie : [ 80, 0, 0 ],
      Darkgrey  : [ 82, 0, 0 ],
      Deadangel : [ 82, 0, 0 ],
      Elnath    : [ 80, 0, 0 ],
      Kredis    : [ 82, 0, 0 ],
      Skyye     : [ 80, 0, 0 ],
      Zadkiel   : [ 82, 0, 0 ],
      Zinna     : [ 82, 0, 0 ]
    };
    $('.character-progress div[id$=Bar]')
    .addClass('ui-progressbar ui-widget ui-widget-content ui-corner-all')
    .append('<div class="ui-progressbar-value ui-widget-header ui-corner-all"></div>');
    for ( b in pb ){
      $('#' + b + 'ProgressBar .ui-widget-header').width( (pb[b][0] - 80) * 20 + '%' );
      $('#' + b + '333Bar .ui-widget-header').width( pb[b][1] + '%' );
      $('#' + b + '346Bar .ui-widget-header').width( pb[b][2] + '%' );
    }
  });
</script>