JSFiddle - React, Tailwind, and code Playground
by Michael Prosser
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="viewport-left">
</div>
<div class="viewport-right">
</div>
CSS
body{
background-color:#666;
}
.viewport-left{
position:fixed;
left:0px;
width:50%;
top:0px;
bottom:0px
}
.viewport-right{
position:fixed;
right:0px;
width:50%;
top:0px;
bottom:0px
}
.radial-progress {
transition:all 1s;
width: 120px;
height: 120px;
border-radius: 50%;
display: block;
position:absolute;
left:50%;
top:50%;
margin-left:-60px;
margin-top:-60px;
}
.radial-progress.dock{
top:10%;
}
.radial-progress:before {
content: attr(data-remain);
color: #fff;
position: absolute;
display: block;
width: 50px;
height:50px;
text-align: center;
left: 50%;
top: 50%;
margin-left:-25px;
margin-top:-25px;
z-index: 200;
font-family: helvetica;
font-size: 18px;
line-height:50px;
background:rgba(0,0,0,0.8);
border-radius:50%;
}
.radial-progress .circle .mask,
.radial-progress .circle .fill,
.radial-progress .circle .shadow {
width: 120px;
height: 120px;
position: absolute;
border-radius: 50%;
}
.radial-progress .circle .shadow {
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2) inset;
}
.radial-progress .circle .mask,
.radial-progress .circle .fill {
-webkit-backface-visibility: hidden;
transition: -webkit-transform 1s;
transition: -ms-transform 1s;
transition: transform 1s;
border-radius: 50%;
}
.radial-progress .circle .mask {
clip: rect(0px, 120px, 120px, 60px);
}
.radial-progress .circle .mask .fill {
clip: rect(0px, 60px, 120px, 0px);
background-color: #ffcc00;
}
.radial-progress .inset {
width: 90px;
height: 90px;
position: absolute;
margin-left: 15px;
margin-top: 15px;
background-color: rgba(0,0,0,0.6);
border-radius: 50%;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
}
.radial-progress .inset .percentage {
height: 22px;
width: 57px;
overflow: hidden;
position: absolute;
top: 34px;
left: 16.5px;
line-height: 1;
}
.radial-progress .inset .percentage .numbers {
margin-top: -22px;
transition: width...
JavaScript
var countdown = {
seconds: 120,
time: 120,
timer: null,
paused: false,
counters: null,
callback: function(){
// default behaviour is player died
alert("PLAYER DIED");
clearInterval(countdown.timer);
// kill player because time ran out
//alert("Killed by timer");
},
create: function(){
// counters start at 100%
var counter1 = $('<div class="radial-progress" data-progress="100" data-remain="0"><div class="circle"><div class="mask full"><div class="fill"></div></div><div class="mask half"><div class="fill"></div><div class="fill fix"></div></div><div class="shadow"></div></div></div>');
var counter2 = $('<div class="radial-progress" data-progress="100" data-remain="0"><div class="circle"><div class="mask full"><div class="fill"></div></div><div class="mask half"><div class="fill"></div><div class="fill fix"></div></div><div class="shadow"></div></div></div>');
$('.viewport-left').append(counter1);
$('.viewport-right').append(counter2);
countdown.counters = $('.radial-progress');
countdown.counters.attr('data-progress','100').attr('data-remain',countdown.time);
countdown.start();
},
start: function(){
setTimeout(function(){
countdown.counters.addClass('dock');
},3000);
countdown.timer = setInterval(function(){
if(!countdown.paused){
countdown.time--;
var elapsed = countdown.seconds - countdown.time;
// get percentage based on time remaining
var t = Math.round((countdown.time/countdown.seconds)*100);
console.log(t);
countdown.counters.attr('data-progress',t).attr('data-remain',countdown.time);
if(countdown.time == 0){
// time ran out
countdown.callback();
}
}
},1000);
},
pause: function(){
countdown.paused = true;
},
resume: function(){
countdown.paused = false;
}
}
countdown.seconds = 300;
countdown.time =...