Search code examples
javascripthtmlcssprogress-barprogress

How to make a Progress bar/Container?


I am creating a website that involves people depositing items into the site, there will be a cap at 100 items. I am looking for a progress bar, horizontal or vertical I don't really mind, that increases as items are deposited into the site.

For now I am in need of help to get the progress bar working, going from 0 - 100%. I will worry about connecting the percentage of the progress bar and items deposited later.

Thanks in advance!


Solution

  • HTML5 has a element that does a very simple version of this.

    It is used as follows:

    <progress value="22" max="100"></progress>
    

    Documentation regarding this element is here

    Browser support is rock solid according to CanIUseIt.com:

    HTML5 progress element is fully supported in the following browsers: Firefox 16+, Chrome 8+, Safari 6+ and Opera 11+.

    You can use javascript or your favorite framework to dynamically update it, and css to style it.

    If you are looking to make something a little more sexy, there are numerous tutorials on the subject. Here is one I like.

    Let me know if you need any more help. Good luck!