Display value in jQueryUI ProgressBar

Question

I\'ve set up a simple jQuery UI ProgressBar:

Answer 1

After fiddling around with some solutions, based on the answers here, I've ended up with this one:

Html:

Loading...please wait

JS:

$("#progress").children('span.caption').html(percentage + '%');

(To be called inside the function that updates the progressbar value)

CSS:

#progress {
  height: 18px;
}

#progress .ui-progressbar {
  position: relative;
}

#progress .ui-progressbar-value {
  margin-top: -20px;
}

#progress span.caption {
  display: block;
  position: static;
  text-align: center;
}

Advantages:

• Caption is centered with no harcoded positioning (necessary if caption width changes dinamically)
• No JS strange manipulation
• Simple and minimal CSS