FULL STACK   ·   UI   ·   UX   ·   GRAPHICS   ·   DEVELOPER   ·   INSTRUCTOR

Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Custom Progress Bar Meter Development For File Upload Forms

Published :
Author :
Adam Khoury
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>