================HTML================

<div id="action-timer">
  <div class="hours"></div>
  <div class="minutes"></div>
  <div class="seconds"></div>
</div>

===========JAVASCRIPT==============

/*-----------------------------------------
+    Timer
-----------------------------------------*/
window.onload = function() {
    var hour = document.getElementById('action-timer').getElementsByClassName('hours');
    var min = document.getElementById('action-timer').getElementsByClassName('minutes');
    var sec = document.getElementById('action-timer').getElementsByClassName('seconds');

    var flagHour = true,
        flagMin = true,
        flagSec = true,
        hourCount = 0,
        minCount = 0,
        secCount = 0;

    var hourProg = new CircularProgress({
        elem: min,
        radius: 59,
        lineWidth: 10,
        strokeStyle: '#4f8cc0',

        text: {
            font: 'bold 40px Calibri',
            fillStyle: '#6c6c6c',
            textAlign: "center",
            textBaseline: "bottom",
            fillText: function(ctx, text, x, y) {
                ctx.fillText(text, x, y + 10);
            }
        },

        initial: {
            lineWidth: 7,
            strokeStyle: '#f1f1f1',

            text: {
                font: '18px Calibri',
                fillStyle: '#6c6c6c',
                textAlign: "center",
                textBaseline: "bottom",
                fillText: function(ctx, text, x, y) {
                    ctx.fillText('часов', x, y + 20);
                }
            }
        }
    });    

    var minProg = new CircularProgress({
        elem: min,
        radius: 59,
        lineWidth: 10,
        strokeStyle: '#4f8cc0',

        text: {
            font: 'bold 40px Calibri',
            fillStyle: '#6c6c6c',
            textAlign: "center",
            textBaseline: "bottom",
            fillText: function(ctx, text, x, y) {
                ctx.fillText(text, x, y + 10);
            }
        },

        initial: {
            lineWidth: 7,
            strokeStyle: '#f1f1f1',

            text: {
                font: '18px Calibri',
                fillStyle: '#6c6c6c',
                textAlign: "center",
                textBaseline: "bottom",
                fillText: function(ctx, text, x, y) {
                    ctx.fillText('минут', x, y + 20);
                }
            }
        }
    });    

    var secProg = new CircularProgress({
        elem: sec,
        radius: 59,
        lineWidth: 10,
        strokeStyle: '#4f8cc0',

        text: {
            font: 'bold 40px Calibri',
            fillStyle: '#6c6c6c',
            textAlign: "center",
            textBaseline: "bottom",
            fillText: function(ctx, text, x, y) {
                ctx.fillText(text, x, y + 10);
            }
        },

        initial: {
            lineWidth: 7,
            strokeStyle: '#f1f1f1',

            text: {
                font: '18px Calibri',
                fillStyle: '#6c6c6c',
                textAlign: "center",
                textBaseline: "bottom",
                fillText: function(ctx, text, x, y) {
                    ctx.fillText('секунд', x, y + 20);
                }
            }
        }
    });    

    var idtimer = setInterval(function() {
        var timer = new Timer('Jul 30 2016 16:00:00', idtimer);        

        if (timer.hour == 0) hourCount = 0;
        if (flagHour) {hourCount = 60 - timer.hour; flagHour = false;}
        hourProg.draw(hourCount = hourCount + 0.025, timer.hour);

        if (timer.min == 0) minCount = 0;
        if (flagMin) {minCount = 60 - timer.min; flagMin = false;}
        minProg.draw(minCount = minCount + 0.05, timer.min);

        if (timer.sec == 0) secCount = 0;
        if (flagSec) {secCount = 60 - timer.sec; flagSec = false;}
        secProg.draw(secCount++, timer.sec);
    }, 1000);
}

var Timer = function (date, id, callback) {
    var newDate = new Date(date),
        date = new Date(),
        timer = newDate - date;

    if (newDate > date) {
        this.hour = parseInt(timer/(60*60*1000))%24;
        this.min = parseInt(timer/(60*1000))%60;
        this.sec = parseInt(timer/1000)%60;
        console.log(this.sec);
    } else {
        callback();
        clearInterval(id);
    }         
}

var CircularProgress = function(options) {
    this.elem = options.elem[0].appendChild(document.createElement('canvas'));
    
    this.draw = function(value, text) {
        var ctx = this.elem.getContext('2d'),
            size = options.radius * 2,
            rad = size / 2,
            x = rad,
            y = rad,
            start = 4.72,
            angle = ((value / 60) * Math.PI*2*10).toFixed(2);

        this.elem.width = size;
        this.elem.height = size;

        ctx.clearRect(0, 0, size, size);

        if (options.initial) {
            ctx.beginPath();
            ctx.lineWidth = options.initial.lineWidth;
            ctx.strokeStyle = options.initial.strokeStyle;
            ctx.arc(x, y, rad - options.initial.lineWidth - 3, 0, Math.PI * 2, false);
            ctx.stroke();
            ctx.closePath();

            ctx.beginPath();
            ctx.font = options.initial.text.font;
            ctx.fillStyle = options.initial.text.fillStyle;
            ctx.textAlign = options.initial.text.textAlign;
            ctx.textBaseline = options.initial.text.textBaseline;
            options.initial.text.fillText(ctx, text, x, y);
            ctx.closePath();
        }

        ctx.beginPath();
        ctx.lineWidth = options.lineWidth;
        ctx.strokeStyle = options.strokeStyle;
        ctx.arc(x, y, rad - options.lineWidth, start, value/10+start, false);
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.font = options.text.font;
        ctx.fillStyle = options.text.fillStyle;
        ctx.textAlign = options.text.textAlign;
        ctx.textBaseline = options.text.textBaseline;
        options.text.fillText(ctx, text, x, y);
        ctx.closePath();
    }
}