jQMeter

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 jQMeter method.

Demo

View demo

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.

Author

This plugin was written by Gerardo Larios.