Pie Chart CountDown Plugin for jQuery
File Size: | 11.6KB |
---|---|
Views Total: | 8261 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple jQuery plugin for creating a countdown timer using CSS animations in the style of Pie Chart. It works fine in Safari, Chrome and Firefox (fallback available in the older browsers).
How to use it:
1. Markup
<div class="spinner-wrapper"> <h3>Count down 1</h3> <div id="spinner1"></div> </div> <div class="button-wrapper"> <input type="button" onclick="spinnerExamples();" value="Count me down!" /> </div>
2. Inlcude jQuery and piechartcountdown.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.piechartcountdown.js"></script>
3. Call the plugin
<script> var $spinner1 = $('#spinner1'), function spinnerExamples() { $('#basic-example .spinner-wrapper').show(); $spinner1 .pieChartCountDown(4, function($spinner) { $spinner.append('<em>Count down 1 finished</em>'); }); } </script>
Fallback in the older browsers:
This awesome jQuery plugin is developed by victorjonsson. For more Advanced Usages, please check the demo page or visit the official website.