Skip to content

Instantly share code, notes, and snippets.

@webag
Created December 25, 2018 08:05
Show Gist options
  • Save webag/c5a5d4dd28d372fb90854505791d2346 to your computer and use it in GitHub Desktop.
Save webag/c5a5d4dd28d372fb90854505791d2346 to your computer and use it in GitHub Desktop.
Round circle countdown to date timer counter
<div class="circle days"></div>
<div class="circle hours"></div>
<div class="circle minutes"></div>
<div class="circle seconds"></div>
// Плагины нужны:
// http://countdownjs.org/
// https://kimmobrunfeldt.github.io/progressbar.js/
$(function($){
var dest = new Date(2018, 11, 29);
var circleParams = {
color: '#ee8839',
strokeWidth: 5,
trailWidth: 2
};
var animParams = {
duration: 400,
easing: 'easeInOut'
};
var circleDays = new ProgressBar.Circle('.days', circleParams);
var circleHours = new ProgressBar.Circle('.hours', circleParams);
var circleMinutes = new ProgressBar.Circle('.minutes', circleParams);
var circleSeconds = new ProgressBar.Circle('.seconds', circleParams);
setInterval(setTimer,1000);
function setTimer() {
var now = new Date();
var ts = countdown(
now,
dest,
countdown.DAYS|countdown.HOURS|countdown.MINUTES|countdown.SECONDS
);
var days = ts.days;
var hours = ts.hours;
var minutes = ts.minutes;
var seconds = ts.seconds;
var daysProgress = 1 / 365 * days;
var hoursProgress = 1 / 24 * hours;
var minutesProgress = 1 / 60 * minutes;
var secondsProgress = 1 / 60 * seconds;
circleDays.animate(daysProgress, animParams);
circleDays.setText(days);
circleHours.animate(hoursProgress, animParams);
circleHours.setText(hours);
circleMinutes.animate(minutesProgress, animParams);
circleMinutes.setText(minutes);
circleSeconds.animate(secondsProgress, animParams);
circleSeconds.setText(seconds);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment