Graphical and Circular Timer with jQuery and CSS3 - pietimer

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:

• Pie Chart CountDown Plugin for jQuery

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.