SVG Timer
SVG Hexagonal final countdown, displays days, hours, minutes and seconds to certain date codepen
Quick start
Choose one of the following options:
-
Download the latest stable release from github and include
dist/svgCountDown.min.js
andsvgCountDown.min.css
or
src/svgCountDown.js
andsrc/svgCountDown.css
if you want to use non-minified version -
Clone the git repo
git clone https://github.com/decipher91/svg.timer.git
-
Install via bower
bower install svg-timer --save
Include link in your html file
bower_components/svg-timer/dist/svgCountDown.min.js
bower_components/svg-timer/dist/svgCountDown.min.css
Usage
<div class="timer"> <script> $(function () { $('.timer').svgCountDown(); }); </script>
Config options:
- date: ISO date string with date and time, for example '2017-01-23T00:00:00'
- track: color for main hexagon, can be rgb, rgba or hex
- fill: color for counting fill, can be rgb, rgba or hex
- transition: transition property (can be ease, linear, ease-in, ease-out, ease-in-out, step-start, cubic-bezier) --- see https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
Extend options like this:
$('.timer').svgCountDown({ date: '2017-02-11T03:15:00' });
Contributing
License
The code is available under the MIT license.