Exemple 7     <<      >>      book     

L'élément progressmeter montre une barre de progression qui peut être placée à une position précise. Si la position n'est pas connue cet élément peut être placé à une valeur indéterminée par l'attribut mode avec comme valeur "undetermined" .

  XUL  HOME     

  xul1.xul  
Sélectionnez le menu Style - Select Style Sheet dans Mozilla pour accéder aux feuilles de styles alternatives.
<?xml-stylesheet href="css1.css" type="text/css" title="css1"?>
<?xml-stylesheet href="css2.css" type="text/css" alternate="yes" title="css2"?>
<?xml-stylesheet href="css3.css" type="text/css" alternate="yes" title="css3"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
align="vertical" >
     <menubar>
          <menu value="mode">
               <menupopup>
                    <menuitem value="normal" name="group" type="radio" checked="true"
                    oncommand="document.getElementById('prog').setAttribute('mode','normal')"/>
                    <menuitem value="undetermined" name="group" type="radio" oncommand="document.getElementById('prog').setAttribute('mode','undetermined')"/>
               </menupopup>
          </menu>
          <menu value="0-50">
               <menupopup>
                    <menuitem value="0" oncommand="document.getElementById('prog').setAttribute('value',0)"/>
                    <menuitem value="10" oncommand="document.getElementById('prog').setAttribute('value',10)"/>
                    <menuitem value="30" oncommand="document.getElementById('prog').setAttribute('value',30)"/>
                    <menuitem value="50" oncommand="document.getElementById('prog').setAttribute('value',50)"/>
               </menupopup>
          </menu>
          <menu value="50-100">
               <menupopup>
                    <menuitem value="50" oncommand="document.getElementById('prog').setAttribute('value',50)"/>
                    <menuitem value="70" oncommand="document.getElementById('prog').setAttribute('value',70)"/>
                    <menuitem value="90" oncommand="document.getElementById('prog').setAttribute('value',90)"/>
                    <menuitem value="100" oncommand="document.getElementById('prog').setAttribute('value',100)"/>
               </menupopup>
          </menu>
     </menubar>
     
</window>

  CSS  HOME     

  css1.css  
La feuille de style apr défaut de Mozilla est utilisée.
@import url(chrome://global/skin);

  css2.css  
La feuille de style par défaut de Mozilla est utilisée.
@import url(chrome://global/skin);
window {background-color:purple}
progressmeter {color:black; background-color:white; border:outset #333333; border-width:5px; margin:30px}

  css3.css  
The default Mozilla CSS is used.
@import url(chrome://global/skin);
progressmeter {margin:10em; border:groove red; color:purple; background-color:navy}