Forums : Xul, Xbl, JS...

Vu que j'ai eu des besoins quelques peu similaires, je t'ai créer ça. (ça ne sera pas systématique) Le code est perfectible vu qu'il a été créé dans la volée.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/" ?>
<window xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
<script>
<![CDATA[
var progress_bar, progmeter;
window.addEventListener("load",start,true);
function start(){
  progress_bar = document.getAnonymousNodes(document.getElementById("my-progressmeter"))[0];
  progmeter = document.getElementById("colorChanger");
  progress_bar.setAttribute('style', '-moz-appearance:none;background-color:red;');
}
function add_progress(){
 var progress = parseInt(progmeter.getAttribute('value')) + 10;
 progmeter.setAttribute('value', progress);
}
function observe_percent(){
  if(progmeter.getAttribute('value') > 30){
    progress_bar.style.backgroundColor = 'green';
  }
  if(progmeter.getAttribute('value') > 50){
    progress_bar.style.backgroundColor = 'orange';
  }
}
]]>
</script>
<broadcasterset>
  <broadcaster id="colorChanger" value="0"/>
</broadcasterset>
<vbox flex="1" style="overflow: auto">
 <hbox >
  <groupbox>
  <caption label="determined" />
    <progressmeter id="my-progressmeter" style="-moz-appearance: none !important;
      background-color: white !important;" mode="determined" >
      <observes element="colorChanger" attribute="value" onbroadcast="observe_percent();"/>
    </progressmeter>
   <button label="Avance" oncommand="add_progress();" />
  </groupbox>
 </hbox>
</vbox>
</window>

Si tu veux comprendre le fonctionnement, le mieux est de lire cette page

Le bouton et sa fonction add_progress() ne sont là que pour te permettre d'avoir un exemple clé en main.

N'hésites pas si tu as des questions... le but étant d'apprendre.

(il vaut apprendre à un homme à pêcher plutôt que de lui offrir un poisson ;))