Certo che se metti il CSS inline, la cosa diventa piu` complicata.

Mi pareva volessi fare una cosa fatta bene: questo vuol dire separare il contenuto dalla presentazione.

Traduco:
codice:
XHTML:
<div id="barraBox">
	

12%</p>
	[img]pixelblu[/img]
</div>

CSS:
#barraBox {
  position:relative;
  border:1px black solid;
  width:300px;
  height:16px;
}
#barraBox p {
  width: 100%;
  height:100%;
  text-align:center;
  position: relative;
  top:0; left:0;
  z-index: 5;
  background-color: transparent;
}
#barraBox img {
  height:100%;
  width: 12%;
  position: relative;
  top:0; left:0;
  z-index: 2;
  background-color: white; /* vedi tu il colore di sfondo */
}
Poi per le prove di modifica, preparati un campo di testo di questo tipo:
<form>
<input type="text" onchange="setBarra(this.value);" />
</form>

E la funzione Js sara` del tipo:
codice:
function setBarra(n) {
  // eventuale test se n >=0 e n<=100
  var cont = document.getElementById('barraBox');
  var perc = cont.getElementsByTagName('p')[0];
  var barr = cont.getElementsByTagName('img')[0];
  perc.innerHTML = n+'%';
  barr.style.width = n+'%';
}