I need a timer which counts and show progress in jQuery

Question

I need a timer which counts and show progress like this:

enter image description here

and in the center there will be a counter which count for 2 minutes. How can I do this in jQuery?

-1 because it showed a lack of effort. The down vote should encourage you to think more about the problem instead of just asking someone to do it for you — Ruan Mendes, Jan 13 '12 at 09:05
potential duplicate http://stackoverflow.com/questions/8136673/animated-circular-countdown-timer-using-html-css-or-javascript — kamui, Jan 13 '12 at 09:06
@johan m not asking to code for me. m asking if u ppl know any plugin close to it. — Ashutosh Mishra, Jan 13 '12 at 09:10
@juan Mendes the progress is in circular way thats why i am having problem.if it was in linear way, i wud have not turned to stack. — Ashutosh Mishra, Jan 13 '12 at 09:15
Here you go: http://stackoverflow.com/questions/3901603/circular-progress-indicator-with-jquery . I googled it just for you! — Konrad Dzwinel, Jan 13 '12 at 10:34
@AshutoshMishra: If you had asked how to draw the circle incrementally, and shown your code that didn't work (along with a description of the problem), you probably wouldn't have been voted down. And Fabrizio Calderan could have answered your question with three lines in 2 minutes. Because you asked such an open ended question, it probably took him 10+ minutes to answer it. — Ruan Mendes, Jan 13 '12 at 15:30

Fabrizio Calderan · Accepted Answer · 2012-01-13T13:24:20.153

you could implement it on modern browser using canvas. I took a look at https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes under "Arcs" section and I came to this solution (a fiddle is linked below)

HTML5

<!DOCTYPE HTML>
<html>  
    <head>  
      <title>Canvas circular timer</title>  
    </head>
    <body>  
        <div>
            <canvas id="timer" width="100" height="100"></canvas>
            <span id="counter">20</span>
        </div>
    </body>  
</html>

CSS

canvas {
   -webkit-transform : rotate(-90deg);  
   -moz-transform : rotate(-90deg);
}

div { position: relative; z-index: 1; height: 100px; width: 100px; }
div span {
    position   : absolute;
    z-index    : 1;
    top        : 50%;
    margin-top : -0.6em;
    display    : block;
    width      : 100%;
    text-align : center;
    height     : 1.5em;
    color      : #0e0;
    font       : 1.5em Arial;
}

Javascript

window.onload = function() {
    var canvas  = document.getElementById('timer'),
        seconds = document.getElementById('counter'),
        ctx     = canvas.getContext('2d'),
        sec     = seconds.innerHTML | 0,
        countdown = sec;

    ctx.lineWidth = 6;
    ctx.strokeStyle = "#00EE00";

    var
    startAngle = 0,
    time       = 0,
    intv       = setInterval(function(){

        var endAngle = (Math.PI * time * 2 / sec);
        ctx.arc(50, 50, 35, startAngle , endAngle, false);   
        startAngle = endAngle;
        ctx.stroke();

        seconds.innerHTML = countdown--;

        if (++time > sec) { clearInterval(intv); }

    }, 1000);

}

You can see a jsFiddle example : http://jsfiddle.net/2qyEv/ (tried with Mozilla and webkit)

Note that the remaining seconds are not written inside canvas, but are inside a <span> element positioned over the canvas. This is done so - implementing a fallback logic - older browser not supporting canvas element could show at least the countdown. If you don't need this kind of optimization this fiddle use only a canvas for text and graphics: http://jsfiddle.net/9L48R/

I leave to you replacing javascript statements with jQuery constructs.

I need a timer which counts and show progress in jQuery

1 Answers1