Custom Progress Bar Meter Development For File Upload Forms

Learn how to develop custom progress bars for your file upload forms to replace the stock HTML progress element. A custom progress component gives you full control over design and functionality. You can very easily tie your custom progress component to your existing progress events in your JavaScript. If you allow users to upload images, music file, video files or any kind of file upload, you may want to consider adding a progress bar to let the users know how much of their file has been uploaded to the server as it is uploaded.

<style>
#pbc{ width:300px; height:16px; background:#000; border:#000 1px solid; }
#pbc > #pb{ position: relative; top:0px; background: #06C; width:0%; height:16px; color: #0FF; text-align:center; }
#pbc > #pbt{ position: relative; top:-19px; text-align:center; color:#FFF; padding: 4px; height:8px; font-size:12px; }
</style>
<div id="pbc">
  <div id="pb"></div>
  <div id="pbt"></div>
</div>
<script>
var testvalue = 50;
var pbt = document.getElementById("pbt");
var pb = document.getElementById("pb");
pb.style.width = testvalue+"%";
pbt.innerHTML = testvalue+"%";
</script>