Get new jQuery plugins just once a week

×

jQMeter

April 7, 2015

JQMeter | jQuery plugin to display an animated horizontal or vertical progress meter.

JQMeter is an awesome jQuery plugin that allows you to display an animated horizontal or vertical progress meter.

Created by Gerardo Larios

Download

Example

JQMeter jQuery plugin

animated progress bars

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

    <p>jQMeter is pretty much ready to go, and the only necessary parameters to get started are the <code>goal</code> and <code>raised</code> 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 <code>jQMeter()</code> method like this:</p>
$('#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

<

p>jQMeter is free to use under the MIT/GPL license for any application.

Author

This plugin was written by Gerardo Larios.

jQMeter

Related posts:

Flot animator
smartcrop-js
Valiant360
JQMeter jQuery plugin

http://jquer.in/wp-content/uploads/2015/04/JQMeter.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever