Home > Plugins and Tools

jQMeter

Get jQMeter View on Github

jQMeter is free to use under the MIT/GPL license for any application. Donations are greatly appreciated, but not required.

Buy me a beer!

jQMeter is a simple, light-weight jQuery plugin that allows you to display an animated horizontal or vertical progress meter. Just pass in the goal and amount raised or completed, and the rest is optional.

It has a simple design out-of-the-box, but this is on purpose so that you can customize the look to match your needs. You can pass several formatting options including width, height, background bar color, bar color, etc. You can also choose to display the percentage completed or not, as well as control the animation speed.

All you need to do is include the plugin file into your webpage, create a target wrapper element, and pass that element's id into the method.

Demo Refresh

Required Files.

  1. jQuery Core JavaScript Library
  2. jqmeter.min.js

Include the above files into your webpage and invoke the jQMeter() method.

You can add your own CSS to style the progress meter to fit your needs.

How to Use

Create an empty wrapper element, in this case a <div>, and assign a unique id or class to it. Then pass that id into the jQMeter method.

<div id="jqmeter-container"></div>
<script type="text/javascript">
$(document).ready(function(){
    $('#jqmeter-container').jQMeter();
});
</script>

Configuration

jQMeter is pretty much ready to go, and the only necessary parameters to get started are the goal and raised values. It also has several options for customization. Some of these customizations can also be achieved with CSS such as colors, etc. Pass these options as an object into the jQMeter() method like this:

$('#jqmeter-container').jQMeter({
    goal:'$1,000',
    raised:'$200',
    meterOrientation:'vertical',
    width:'50px',
    height:'200px'
});

Options

Property Type Default Description
goal string No default, must be set as option. The goal of the meter. Can take strings like "$9,000" or integers like "9000".
raised string No default, must be set as option. The goal of the meter. Can take strings like "$9,000" or integers like "9000".
width string 100% - for horizontal
(Must be set for vertical)
Set the width of the progress meter. You can pass percentages or pixel based values.
height string 50px - for horizontal
(Must be set for vertical)
Set the height of the progress meter. You can pass percentages or pixel based values.
bgColor string #444 Supports hex, rgba, or word values.
barColor string #bfd255 Supports hex, rgba, or word values.
meterOrientation string horizontal meterOrientation: 'horizontal' or 'vertical'. If set to 'vertical', width and height need to be specified.
displayTotal boolean true Whether to display the percentage completed or raised.
animationSpeed integer 2000 Animation time in milliseconds.
counterSpeed integer 2000 Counter animation time in milliseconds.

License

jQMeter is free to use under the MIT/GPL license for any application. Donations are greatly appreciated, but not required.

Buy me a beer!

Author

This plugin was written by Gerardo Larios.