Simple jQuery Progress Bar Plugin
Quick Tutorial
jQMeter is a simple, practical, and lightweight jQuery progress bar plugin. It can display horizontal or vertical progress bars with animated loading effects. Simply pass a few parameters to the jQMeter object's constructor to create the progress bar effect you want.
The constructor of this progress bar plugin allows you to define parameters such as the progress bar's width, height, background color, and bar color. You can use these parameters to create your own progress bar style.
Usage
To use this progress bar plugin, you must first include the jQuery and jqmeter.min.js files.
1 2 | <script src="js/jquery.min.js" type="text/javascript"></script><script type="text/javascript" src="js/jqmeter.min.js"></script> |
HTML Structure
The HTML structure of this progress bar plugin requires only an empty <div> element.
1 | <div id="jqmeter-container"></div> |
Initialize the Plugin
After the page has finished loading, you can call this progress bar plugin using the following method.
1 2 3 | $(document).ready(function(){ $('#jqmeter-container').jQMeter();}); |
Note: This progress bar plugin has two required parameters: goal and raised. There are also several optional parameters, some of which can be implemented using CSS, such as color settings.
1 2 3 4 5 6 7 | $('#jqmeter-container').jQMeter({ goal:'$1,000', raised:'$200', orientation:'vertical', width:'50px', height:'200px'}); |
Configuration Parameters
Parameters Type Default Value Description
goal string No default value; required parameter The total length of the progress bar. Can be set as a string, such as "$9000", or an integer, such as "9000".
raised string No default value; required parameter The current progress of the progress bar. Can be set as a string, such as "$5000", or an integer, such as "5000".
width string 100% - Horizontal width. (Required for horizontal progress bars) Sets the horizontal width of the progress bar. Can be specified as a percentage or pixel value.
height string 50px. (Required for vertical progress bars) Sets the vertical height of the progress bar. Can be specified as a percentage or pixel value.
bgColor string #444 Background color of the progress bar. Supports hex, rgba, and color keywords.
barColor string #bfd255 Color of the progress bar. Supports hex, rgba, and color keywords.
orientation string horizontal Direction of the progress bar. Can be set to 'horizontal' or 'vertical'. This parameter is required for vertical progress bars.
displayTotal boolean true Whether to display the completion percentage of the progress bar.
animationSpeed integer 2000 Progress bar animation duration, in milliseconds.
counterSpeed integer 2000 Progress bar counting duration, in milliseconds.