Skip to content

Instantly share code, notes, and snippets.

@Bhavya8181
Forked from jack2jm/Countdown timer
Created February 12, 2024 05:52
Show Gist options
  • Select an option

  • Save Bhavya8181/e03a28327452d95d000f3a54082ccfea to your computer and use it in GitHub Desktop.

Select an option

Save Bhavya8181/e03a28327452d95d000f3a54082ccfea to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="padding: 30px">
<style type="text/css">
.ag-format-container{width:90%;margin:0 auto}
.js-ag-timer-block{position:relative}
.js-ag-timer_item{text-align:center;position:absolute}
.js-ag-timer_num{line-height:1.2!important;color: #1f6098}
.js-ag-timer_name{color: #1f6098;}
</style>
<div class="ag-format-container">
<div id="js-countdown"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://rawcdn.githack.com/SochavaAG/example-mycode/master/pens/timer-countdown/libs/TimeCircles.min.js"></script>
<script type="text/javascript">
(function ($) {
$(function () {
var arr = "2021-03-15 10:30:00".split(/[- :]/),
date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
console.log(date);
/*
new Date(2021, 0, 1, 0, 0, 0, 0) // this works well
*/
$(window).resize(agResize);
agResize();
function agResize() {
$('#js-countdown').TimeCircles({
ref_date: date,
start: true,
refresh_interval: 0.1,
count_past_zero: true,
circle_bg_color: '#DEDEDE',
use_background: true,
fg_width: 0.05,
bg_width: 0.50,
time: {
Days: {show: true, text: 'Days', color: '#F09217'},
Hours: {show: true, text: 'Hours', color: '#F09217'},
Minutes: {show: true, text: 'Minutes', color: '#F09217'},
Seconds: {show: true, text: 'Seconds', color: '#F09217'}
}
}).rebuild();
}
});
})(jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment