Minimal jQuery Animated Progress Bar Plugin - goalProgress

File Size: 10.3 KB
Views Total: 2540
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal jQuery Animated Progress Bar Plugin - goalProgress

goalProgress is a super tiny jQuery plugin to create an animated goal progress bar with prefix/suffix text support. 

Basic Usage:

1. Include jQuery javascript library together with jQuery goalProgress plugin's files in the page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="goalProgress.css" />
<script type="text/javascript" src="goalProgress.js"></script>

2. Create an empty container for the gola progress bar.

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

3. Initialize the plugin with options and specify the goal amount and current amount.

<script type="text/javascript">
$(document).ready(function(){
$('#sample_goal').goalProgress({
goalAmount: 600,
currentAmount: 400,
speed: 1000,
textBefore: '$',
textAfter: ' raised.'
});
});
</script>

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