Animated Customizable Progress Meter Plugin For jQuery - jQMeter

File Size: 5.06 KB
Views Total: 14527
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Animated Customizable Progress Meter Plugin For jQuery - jQMeter

jQMeter is a tiny (~3kb compressed) jQuery plugin to show the progress in percentage for a certain item in an animated, CSS styleable progress bar which supports vertical or horizontal layout. Licensed under the MIT/GPL.

How to use it:

1. Include jQuery library and the jQuery jQMeter plugin at the bottom of the web page.

<script src=""></script>
<script src="jqmeter.min.js"></script>

2. Create an element that will be served as a container for the progress meter.

<div id="demo"></div>

3. Call the plugin and setup the progress meter using JS option objects.


4. All the default options.


// the width of the progress meter
width: "100%",

// the height of the progress meter
height: "50px",

// the background color
// Supports hex, rgba, or word values
bgColor: "#444",

// the text color
// supports hex, rgba, or word values.
barColor: "#bfd255",

// horizontal or vertical
orientation: "horizontal",

// counter speed in milliseconds
counterSpeed: 2000,

// animation time in milliseconds.
animationSpeed: 2000,

// whether to display the percentage completed or raised.
displayTotal: true


Change logs:


  • fixing vertical meter in mobile


  • Added counter animation functionality

This awesome jQuery plugin is developed by glarios. For more Advanced Usages, please check the demo page or visit the official website.