如何制作进度条/容器？

Question

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!

Answer 1

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!