Как отобразить прогресс бар при загрузке файла на сервер?

Нашел подходящий пример но в нем рандомные данные загрузки файла.

Вот мой js и код формы:

$(function(){
var progressBar = $('#progressbar');
$('#my_form').on('submit', function(e){
    e.preventDefault();
    var $that = $(this),
            formData = new FormData($that.get(0));
    $.ajax({
        url: $that.attr('action'),
        type: $that.attr('method'),
        contentType: false,
        processData: false,
        data: formData,
        dataType: 'json',
        xhr: function(){
            var xhr = $.ajaxSettings.xhr(); // получаем объект XMLHttpRequest
            xhr.upload.addEventListener('progress', function(evt){ // добавляем обработчик события progress (onprogress)
                if (evt.lengthComputable) { // если известно количество байт
                    // высчитываем процент загруженного
                    var percentComplete = Math.ceil(evt.loaded / evt.total * 100);
                    // устанавливаем значение в атрибут value тега progress
                    // и это же значение альтернативным текстом для браузеров, не поддерживающих <progress>
                    progressBar.val(percentComplete).text('Загружено ' + percentComplete + '%');
                }
            }, false);
            return xhr;
        },
        success: function(json){
            if(json){
                $that.after(json);
            }
        }
    });
});
});

Форма

<form action="handler.php" method="post" id="my_form" enctype="multipart/form-data">
<p>
<label for="myfile">Файл:</label>
  <input type="file" name="my_file" id="my_file"> 
  <progress id="progressbar" value="0" max="100"></progress>
</p>
<input type="submit" id="submit" value="Отправить">
</form>

handler.php

if(isset($_FILES['my_file'])){
$req = false;
// Приведём полученную информацию в удобочитаемый вид
ob_start();
echo '<pre>Данные загруженного файла:<br>'; 
print_r($_FILES['my_file']);
echo '</pre>';
$req = ob_get_contents();
ob_end_clean();
echo json_encode($req); // вернем полученное в ответе
exit;
}

Добавил в свой код стили из примера (ссылка выше) и ничего не изменилось, мой бар выглядит так:

я хочу с цифрами и другим видом, так:

Свою html форму тоже правил, делал как в примере, но прогресс бар вообще исчезает либо отображается несколько раз.

Пожалуйста, помогите интегрировать js из примера в мою форму, чтобы показывала реальные данные и выглядела как нужно.

Спасибо!