Pie Chart CountDown Plugin for jQuery

File Size: 11.6KB
Views Total: 8261
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Pie Chart CountDown Plugin for jQuery

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.