JSFiddle - React, Tailwind, and code Playground

by chriswt

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://5.39.95.42/StackBlur.js"></script>
<div class="timer fill">
    <div class="content">
        <div class="cover-container">
            <canvas id="canvas"></canvas>
        </div>
        <div class="inner-circle"></div>
    </div>
    <div class="remain-secs strokeme"></div>
    <div id="slice-container"></div>
</div>

CSS

.strokeme {
    color: black;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
#cover {
    position: absolute;
        top: 0;
    left: 0;
   /* background:url(https://dl.dropboxusercontent.com/s/u3uiawdkvzsrw89/0348f700446e044515b6c73a70252627b2ea362f%20%281%29.jpg?dl=1&token_hash=AAEGL3suke4PjKBLgV5NuOAptt81qy049NTZhcA1XiRekA);
background-size:145px 145px;*/
}
.cover-container {
    border-radius: 50px;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
        width: 145px !important;
    height: 145px !important;
}
.timer #cover, #canvas, .cover-container {
    border-radius: 50%;
    /*background:url(http://vol12.music-bazaar.com/album-images/vol12/635/635873/2481780-big/Addicted-To-You-Single-cover.jpg);
    background-size:145px 145px;
    background-repeat:no-repeat;*/
    width: 145px !important;
    height: 145px !important;
}
.inner-circle {
    top: 0;
    left: 0;
    position: absolute;
    width: 145px;
    height: 145px;
    opacity: 0.9;
    /*border-radius: 50%;*/
    background:url(http://s15.postimg.org/6tah8e6av/bg_countdown.png);
    /*background-color: #323a45;*/
}
.timer .content {
    position: absolute;
    top:19px;
    left: 19px;
}
.timer {
    position: relative;
    width:182px;
    height:182px;
}
.timer .remain-secs {
    position: absolute;
    top: 75px;
    width: 182px;
    font-family:'Milford', Helvetica, Arial, sans-serif;
    color: white;
    font-size: 45px;
    text-align:center;
}
.timer #slice {
    position:absolute;
    width:182px;
    height:182px;
    clip:rect(0px, 182px, 182px, 91px);
    z-index: -1;
}
.timer #slice.gt50 {
    clip:rect(auto, auto, auto, auto);
}
.timer #slice > .pie {
    position:absolute;
    width:1em;
    height:1em;
    clip:rect(0px, 91px, 182px,...

JavaScript

var timer;
var timerCurrent;
var timerFinish;
var timerSeconds;

function drawTimer(percent, seconds) {
    $('#slice-container').html('<div id="slice"' + (percent > 50 ? ' class="gt50"' : '') + '><div class="pie"></div>' + (percent > 50 ? '<div class="pie fill"></div>' : '') + '</div>');

    var deg = 360 / 100 * percent;

    $('#slice .pie').css({

        '-moz-transform': 'rotate(' + deg + 'deg)',

            '-webkit-transform': 'rotate(' + deg + 'deg)',
            '-ms-transform': 'rotate(' + deg + 'deg)',

            '-o-transform': 'rotate(' + deg + 'deg)',

            'transform': 'rotate(' + deg + 'deg)'

    });

    var sec_elapsed = timerSeconds - seconds;
    var opacity;
    if (sec_elapsed <= 20) {
        // Slow increase (1 -> 0.9)
        opacity = 1 - (sec_elapsed * 0.1) / 20;
    } else {
        // Fast increase (0.9 -> 0.7)
        opacity = 1 - ((sec_elapsed - 20) * 0.3) / 10;
        if (opacity > 0.9) opacity = 0.9;
    }

    console.log(opacity + ' ' + sec_elapsed);

    $(".inner-circle").css("opacity", opacity);

    $('.remain-secs').html(Math.round(seconds));
}

function stopWatch() {
    var seconds = (timerFinish - (new Date().getTime())) / 1000;
    if (seconds <= 0) {
        drawTimer(100, 0);
        clearInterval(timer);

    } else {
        var percent = 100 - ((seconds / timerSeconds) * 100);
        drawTimer(percent, seconds);
    }
}

$(document).ready(function () {
    timerSeconds = 30;
    timerCurrent = 0;
    timerFinish = new Date().getTime() + (timerSeconds * 1000);

    timer = setInterval(stopWatch, 50);
    //drawTimer(75, 20);
});