Graphical and Circular Timer with jQuery and CSS3 - pietimer
File Size: | 4.62KB |
---|---|
Views Total: | 30882 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

pietimer is a simple jQuery plugin that allows you to create a circular pie graph-like timer using CSS3 and jQuery. Good for countdown timer or loading bar.
You might also like:
How to use it:
1. Include jQuery library and pietimer.js on your page
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.pietimer.js"></script>
2. Create html
<div id="timer"></div>
3. The CSS
#timer { margin: 20px; width: 80px; } .pietimer { position:relative; font-size: 200px; width:1em; height:1em; float: left; } .pietimer > .percent { position: absolute; top: 1.05em; left: 0; width: 3.33em; font-size: 0.3em; text-align:center; display: none; } .pietimer > .slice { position:absolute; width:1em; height:1em; clip:rect(0px,1em,1em,0.5em); } .pietimer > .slice.gt50 { clip:rect(auto, auto, auto, auto); } .pietimer > .slice > .pie { border: 0.1em solid #c0c0c0; position:absolute; width:0.8em; /* 1 - (2 * border width) */ height:0.8em; /* 1 - (2 * border width) */ clip:rect(0em,0.5em,1em,0em); -moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em; } .pietimer > .slice > .pie.fill { -moz-transform:rotate(180deg) !important; -webkit-transform:rotate(180deg) !important; -o-transform:rotate(180deg) !important; transform:rotate(180deg) !important; } .pietimer.fill > .percent { display: none; } .pietimer.fill > .slice > .pie { border: transparent; background-color: #c0c0c0; width:1em; height:1em; }
4. Call the plugin
<script type="text/javascript"> $(function() { $('#timer').pietimer({ timerSeconds: 10, color: '#234', fill: false, showPercentage: true, callback: function() { alert("yahoo, timer is done!"); $('#timer').pietimer('reset'); } }); }); </script>
This awesome jQuery plugin is developed by chikamichi. For more Advanced Usages, please check the demo page or visit the official website.