Minimal Hexagon Countdown Timer With jQuery And SVG - SVG Timer

The SVG Timer jQuery plugin allows you to draw a SVG based hexagon countdown timer / count up counter that uses CSS transition-timing-function for the smooth transition effects.

How to use it:

1. Put jQuery library together with the jQuery SVG timer plugin's JS and CSS files in the html file.

<link rel="stylesheet" href="svgTimer.min.css">
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="svgTimer.min.js"></script>

2. Create a container element on which you want to draw the hexagon countdown timer.

<div class="svg-test">
</div>

3. The JavaScript to generate a default countdown timer that will count down from 60.

$('.svg-test').svgTimer();

4. Specify the time in milliseconds you'd like to countdown from.

$('.svg-test').svgTimer({
  time: 60,
});

5. Change the default track / fill colors.

$('.svg-test').svgTimer({
  track: 'rgb(56, 71, 83)',
  fill: 'rgb(104, 214, 198)',
});

6. Customize the transition effect.

$('.svg-test').svgTimer({

  // ease, linear, ease-in, ease-out, ease-in-out, step-start, cubic-bezier
  transition: 'linear'
  
});

7. Convert the countdown timer into a counter that counts up to a specific number from 0.

$('.svg-test').svgTimer({

  direction: 'backward',
  
});

8. Set the interval.

$('.svg-test').svgTimer({

  interval: 86400000
  
});

Change log:

2016-11-04

• added direction and custom interval support

---

This awesome jQuery plugin is developed by decipher91. For more Advanced Usages, please check the demo page or visit the official website.