Minimal Hexagon Countdown Timer With jQuery And SVG - SVG Timer

File Size: 8.83 KB
Views Total: 10026
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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">

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


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

  time: 60,

5. Change the default track / fill colors.

  track: 'rgb(56, 71, 83)',
  fill: 'rgb(104, 214, 198)',

6. Customize the transition effect.


  // 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.


  direction: 'backward',

8. Set the interval.


  interval: 86400000

Change log:


  • 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.