Simple and lightweight library without any dependencies to create and manage down timer.
DEMO
You must include the JavaScript file (circle-timer-down.min.js) and stylesheet (circle-timer-down.min.css) in head tag. And also you need create div with class - "circle-timer" in the place where the timer will used. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="dist/circle-timer-down.min.css">
<script src="dist/circle-timer-down.min.js"></script>
</head>
<body>
<!-- your code -->
<div class="circle-timer"></div>
</body>
</html>To create Timer with specific options you can pass them as argument to constructor.
document.addEventListener("DOMContentLoaded", function () {
var timer = new CircleTimerDown();
});Or if you use jquery:
$( document ).ready(function() {
var timer = new CircleTimerDown();
});list of available options:
- startDate
- nowDate - If you not specified it the parameter the date will be taken current.
- endDate
- labelDay
- labelHours
- labelMinutes
- labelSeconds
For example:
var timer = new CircleTimerDown({
startDate: '2017/01/5 16:30:00',
nowDate: '2017/05/15 21:33:29',
endDate: '2017/05/16 13:02:00',
labelDay: 'Day',
labelHours: 'Hours',
labelMinutes: 'Minutes',
labelSeconds: 'Seconds'
});