I'm not familiar with BuddyPress, but all upload handlers (including the HTML5 XHR one that androbin outlined) will have a file progress hook point that you can bind to.
I've used uploadify, uploadifive and swfupload, and they can all interact with the same progress function handler in order to acheive the same progress bar result.
// SWFUpload
$elem.bind('uploadProgress', function(event, file, bytesLoaded) { fnProgress(file, bytesLoaded); })
// Uploadify
$elem.uploadify({ onUploadProgress: function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) { fnProgress(file, bytesUploaded); });
// Uploadfive
$elem.uploadifive({ onProgress: function(file, e) { fn.onProgress(file, e.loaded); });
Uploadifive, being an HTML5 based uploader, simply binds to the XHR 'progress' event, so all these properties will be available to any HTML5 uploader.
As for the actual progress bar code..
HTML:
<div class='progressWrapper' style='float: left; width: 100%'>
<div class='progress' style='float: left; width: 0%; color: red'></div>
<div class='progressText' style='float: left;></div>
</div>
JS:
var fnProgress = function(file, bytes) {
var percentage = (bytesLoaded / file.size) * 100;
// Update DOM
$('.progress').css({ 'width': percentage + '%' });
$('.progressText').html(Math.round(percentage + "%");
}