div border-top作为上传文件的进度条

Question

我可以毫无问题地创建进度条，并且在上传文件时进度条会显示“进度”。但是，我无法将div的顶部边框整理为进度条。请参阅下面的jsfiddle。我喜欢蓝色的顶部边框成为进度栏。我也尝试将“ progressbar”更改为“ hpanel hblue”，但这也不起作用。谢谢。

HTML：

 <div class="row">
<div class="col-lg-5">
    <div class="hpanel hblue">
        <div class="panel-heading hbuilt">Upload file</div>
        <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
        <div class="panel-body">
            <form id="upload_form" enctype="multipart/form-data" method="post">
                <div class="input-file-container">
                    <input type="file" name="file1" id="file1" class="input-file">
                    <label tabindex="0" for="my-file" class="input-file-trigger btn btn-primary"><i class="fa fa-upload"></i> <span class="bold">Upload</span></label>
                    <h5 id="status"></h5>
                    <p id="loaded_n_total"></p>
                </div>
                <p class="file-return"></p>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <div class="col-sm-8 col-sm-offset-2">
                        <button class="btn btn-primary" value="Upload File" onclick="uploadFile()"><span class="bold">Do it!</span></button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

JS：

  function _(el) {
  return document.getElementById(el);
  }

  function uploadFile() {
  var file = _("file1").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var formdata = new FormData();
  formdata.append("file1", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "parser.php");
  ajax.send(formdata);
  }

 function progressHandler(event) {
  _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
 }

 function completeHandler(event) {
 _("status").innerHTML = event.target.responseText;
 _("progressBar").value = 0;
}

function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}

function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}

CSS：

.hpanel.hblue .panel-body {
border-top: 2px solid #3498db;
}

progress {
-webkit-writing-mode: horizontal-tb !important;
-webkit-appearance: progress-bar;
box-sizing: border-box;
display: inline-block;
height: 1em;
width: 10em;
vertical-align: -0.2em;
}
.hpanel {
background-color: none;
border: 0;
box-shadow: none;
margin-bottom: 25px;
}
.input-file-container {
position: relative;
width: 225px;
}