Super simple progressbar, from 0 to 100, as a jQuery plugin.
Include the .js file, and then just do:
$('#an_element').simple_progressbar();Or personalize your progressbar with options:
$('#an_element').simple_progressbar({'height': '50px', value: 75});| Option | Description |
|---|---|
| value (no default value) | progress value. If not provided it will use the text of the DOM element as value |
| normalColor (default "#76E29C") | the color of the actual bar, when the progress is between 0 and 100 |
| overflowColor (default "#E67373") | the color of the actual bar when the progress is above 100 ("ovefrlow") |
| backgroundColor (default "#EEEEEE") | the color of the background behind the bar |
| height (default '20px') | the height of the bar (no background included) |
| width (default '200px') | the width of the bar (no background included) |
| internalPadding (default '1px') | the spacing between the background and the actual bar |
| showValue (default false) | true to show the value of the progress inside the bar |
| valueText (no default value) | something to show inside the bar instead of the actual value |
And worth mentioning, you can style the text of the values using css, just point to the container selector.