Minimal jQuery Animated Progress Bar Plugin - goalProgress
File Size: | 10.3 KB |
---|---|
Views Total: | 2542 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.